电商后台项目

一、上传gitee

因为我们的项目使用的是vue脚手架创建的

所以上传到码云的时候不需要再次进行初始化

gitee官网

登陆自己账户之后 我们只需要新建仓库

输入自己的仓库名称 直接点击创建即可

创建成功之后如下界面

我们只需要在你需要上传的目录中打开 Gie Bash Here

按照上面说明，进行本地操作

• 本地 目录下新建 README.md ，可以使用 touch 命令，或者手动创建
• 添加 README.md 到暂存区 git add README.md
• 提交更改 git commit -m 'first commit 添加对应的远程仓库 git remote add origin … ，注意要使用自己的地址
• 推送本地仓库到远程仓库 git push -u origin master

二、配置Element -UI

安装element-ui

npm i element-ui -S

按需引入：

在入口文件main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

三、配置Axios

安装

npm install axios

配置

// 挂载axios
Vue.prototype.$http = axios;
// 配置axios基准地址
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

• 因为我们不止一个组件要使用Axios
• 所以我们同样要在main.js中引入axios
• 挂载axios之后我们就可以使用this.$http代替axios
• 配置基准地址是为了每次请求时不在输入 避免麻烦

四、less-loader

我们使用到less语法时 需要安装less 和 less-loader

npm install less less-loader -D

但是 安装之后 打包依旧会报错

这是因为 less 和less-loader不兼容导致的

解决方案：卸载高版本less-loader

npm uninstall less-loader

再安装低版本，从这里选择一个版本安装，比如 7.3.0

npm i less-loader@7.3.0

五、设置全局样式

全局样式，就是所有或者大部分组件都需要用到的样式

可以在 App.vue 中直接设置，这样凡是通过 App.vue 中的路由出口展示的组件，都会使用此样式

但过路由出口展示的组件则不会使用，另外，如果样式过多，也很乱

推荐做法：

• assets 中新建 css 目录
• css 目录下新建 common.css
• 并在main.js中引入common.css

六、添加iconfont字体

不建议下载到本地引入 因为包较大

我们需要将上面路径复制

并在public目录下的index.html中引入

<link rel="stylesheet" href="//at.alicdn.com/t/font_2421358_xludpml4fa.css">

然后使用icon图标即可

七、表单验证

• 给表单添加属性:rules=“formRules”，formRules是一堆验证规则，定义在script中
• 在data中定义formRules规则的具体内容

// 定义验证规则列表
      FormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
        ]
      }

注意的是：

FormRules下的属性名要与输入框绑定的属性名一致

• 通过的prop属性设置验证规则

<el-form-item label="用户名" prop="username">

八、异步改造

异步嵌套总是很多：

• validate 的参数是回调函数
• post 方法返回的虽然是一个 promise ，但promise 的 then 方法也是一个回调函数

promise 虽然结局了回调地狱的问题，但同时大量的链式调用也让人深恶痛绝，今天我们就一劳永逸的解决这个问题

async+await

让我们以一种更加优雅的方式调用执行 promise

• await 关键字可以让 async 函数暂停执行，等执行完 await 修饰的函数，再继续执行函数后面的代码
• await 函数修饰的函数返回值因该是一个 Promise，如上面的 validate 函数的返回值就是 promise
• 如果promise 内部执行成功，则执行 resolve 方法，返回值会作为 await 修饰函数的返回值
• 如果promise 内部执行失败，则执行 reject 方法，我们需要使用try catch 捕获这个异常。所以严格来说，我们应该使用 try catch 修饰

    async submitLogin(form) {
      try {
        await this.$refs.form.validate();
        // 验证通过执行登陆逻辑
        let res = await this.$http.post("login", this.loginForm);
        // console.log(res)
        const { msg, status } = res.data.meta;
        if(status == 400){
          // console.log(msg)
          this.message=msg
          return false
        }
        localStorage.setItem('token',res.data.data.token)
        this.$router.push('/home')
        // console.log(res.data)
      } catch (err) {
        this.message="验证不通过"
      }
    },

如果不使用try和catch的话：

await this.$refs.form.validate()不成立时控制台会报错

所以需要try嵌套 catch为失败执行