http接口平台开发

一、框架搭建

前端vue

// 基本框架
// 安装vue-cli
npm install -g @vue/cli
// 创建项目
// vue create http-frontend
后面使用的是vite架构 搭建基础框架和基本设置在硅谷甄选那篇笔记中
pnpm create vite
// 根据项目进行具体的配置
// 运行项目
pnpm run dev

后端express

// 安装express-generator
npm install -g express-generator
// 基本框架
express http-interface-backend
npm install
SET DEBUG=http-backend:* & npm start

分别在vscode中前后端项目中设置launch.json文件进行快捷启动，不需要在终端中输入命令运行。

VS Code配置F5一键运行Vue应用（npm run serve）_KevinAha的博客-CSDN博客

根据手摸手，带你用vue撸后台系列一（基础篇） - 掘金 (juejin.cn)做好准备方面的工作：

1、根据业务模块来划分views，views和api两个模块一一对应，从而方便维护，全区公用的api模块，可以单独放置

2、components放置的都是全局公用的组件（上传组件、富文本等等），页面级的组件建议放在各自的views文件下，方便管理。

3、store 不建议为了vuex而用vuex，它只适合耦合度较大的模块，但是例如登录token、用户信息、全局个人偏好设置等内容可以使用vuex管理，具体还是需要结合自己的业务场景。

4、alias

项目变大之后，文件之间的引用关系复杂，需要使用alias

5、ESLint

vscode+eslint

需要安装eslint插件，按照链接进行设置

给Vscode配置ESlint语法检查 — ESLint 插件自动格式化设置（实现Ctrl+S 按照ESLint规则自动格式化代码）_vscode语法检查插件_樂途途的博客-CSDN博客


    "files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       &#123; "language": "vue", "autoFix": true &#125;
     ],
     "eslint.options": &#123;
        "plugins": ["html"]
     &#125;

ctrl+Shift+P Reload Window 快速重启vscode

6、封装axios

7、前后端交互

跨域问题 proxy跨域代理

跨域问题
- cors来解决跨域
推荐的原因是只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是测试环境都能方便的使用。
- node中间代理：proxy代理跨域
dev环境通过webpack-dev-server的proxy来解决，开发环境用nginx反代理一下就好了，但这种方法在生成环境是不适用的。在生产环境中需要使用Nginx反向代理不管是 proxy 和 nginx 的原理都是一样的通过搭建一个中转服务器来转发请求规避跨域的问题。
```
// 使用node中间代理：proxy代理跨域的方式
// 在vue.config.js配置文件中配置
devServer: &#123;
    proxy: &#123;
      "/test": &#123;
        // 目标地址
        target: "http://localhost:3000",
        // 是否换源
        changeOrigin: true,
      &#125;
    &#125;
  &#125;
```
原理

为什么node能够解决跨域：因为node不是运行在浏览器中的东西，没有跨域问题，跨域，就是同源策略只存在于浏览器环境中，使用了浏览器内核的环境，在app、小程序等平台中是没有这个问题的。
前后端交互
mock