商城项目【登录篇】

电商项目后台文件

---

1、恢复安装后台文件夹

进入vue-api-server 目录，运行如下命令进行恢复安装

npm install

2、导入数据库文件

1. 启动小p系统中的MySQL

2. 打开Navicat

3. 新建数据库（数据库名：shop-admin 字符集：utf8）

   

4. 把后台文件夹——db文件——shop_admin.sql文件导入

5. 查看数据库配置（config文件夹下——default.json文件）名和密码是否一致

   

3、运行命令，启动后端文件

node .\app.js

列出了当前项目下的所有接口

4、测试接口是否能使用

浏览器中打开一个接口测试（找一个不用登录的接口）

127.0.0.1:8888/api/private/v1/goods

这个样子就证明接口能用了

git命令进行管理

---

1、在码云上创建仓库

其他的不用选择，直接创建。

2、配置本地用户名和邮箱

1. 查询是否设置过用户名

   git cnfig --global user.name
   

2. 创建项目（找一个文件目录，shift+右键打开powershell窗口）

   # 运行下面命令(vue-shops是项目名称)
   vue create vue-shops
   

3. 选择安装的步骤

   • 

   • 

   • 

   • 

   • 

   • 

   • 

   • 

4. 运行页面上给的命令，直到出现地址

   

   cd vue-shops
   
   npm run serve
   

   直到出现下面这样的地址

   

3、将本地项目推送到远程仓库

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

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

使用Element组件

---

1、安装Element ui

npm i element-ui -S

2、引入Element ui

1. 方式一

   在main.js中加入如下代码

   

2. 方式二

3、样式和安装 less-loader

<style lang="less" scoped>
.login-container {
  background-color: #303133;
  height: 100%;
  .login-box {
    width: 450px;
    height: 310px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    .logo-box {
      position: absolute;
      width: 150px;
      height: 150px;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: #fff;
      padding: 5px;
      box-shadow: 0 0 10px #eee;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .loginForm {
      position: absolute;
      top: 120px;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      text-align: center;
    }
  }
}
</style>

代码中用到了 less 的语法，所以需要安装 less 和 less-loader

npm install less less-loader -D

安装完毕，打包时会报错

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

解决方案：

1. 卸载高版本，安装低版本

   # 卸载当前版本
   npm uninstall less-loader
   

   安装新版本（我这里安装的是7.多版本）

   npm install less-loader@7.3.0 --save-dev
   

2. 创建vue项目时候安装less

   

   

   这样，创建的项目，就会选择当前 vue 版本下，less 和 less-loader 的最佳搭配

4、运行中遇到的问题

出现下面这种错误

解决办法：(下面两种)

1. 找到package.json文件中的"@vue/cli-plugin-eslint": “~4.5.0”,给他删掉。（这个是设置的严格模式导致的）

2. vscode中安装ESLint插件

   配置settings.json文件

   {
     // vscode默认启用了根据文件类型自动设置tabsize的选项
     "editor.detectIndentation": false,
     // 重新设定tabsize
     "editor.tabSize": 2,
     // #每次保存的时候自动格式化
     "editor.formatOnSave": true,
     // #每次保存的时候将代码按eslint格式进行修复
     // 添加 vue 支持
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "vue"
     ],
     //  #让函数(名)和后面的括号之间加个空格 不加空格false
     "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
     // #让vue中的js按编辑器自带的ts格式进行格式化
     "vetur.format.defaultFormatter.js": "vscode-typescript",
     "vetur.format.defaultFormatterOptions": {
       "js-beautify-html": {
         "wrap_attributes": "force-aligned"
         // #vue组件中html代码格式化样式
       }
     },
     "window.zoomLevel": 0,
     "explorer.confirmDelete": false,
     "explorer.confirmDragAndDrop": false,
     "editor.renderControlCharacters": true,
     "editor.renderWhitespace": "all",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "editor.fontSize": 18
   }
   

5、添加第三方字体

打开阿里图标库

下载至本地

解压后，重命名为 font ，然后开呗到 assets 目录下

在 main.js 中引入 iconfont.css

import './assets/fonts/iconfont.css'

然后再组件中使用

生成在线链接

拷贝上面的链接，到 publis/index.html 中

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

6、表单验证

1. 给添加属性:rules=“formLoginRules”，formLoginRules是一堆验证规则，定义在script中

2. 在data中定义formLoginRules规则的具体内容

   export default {
     data() {
       return {
         loginForm: {
           username: "",
           password: ""
         },
         // 定义验证规则列表
         loginFormRules: {
           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">
   

   7、安装配置 axios

   安装 axios

   npm i axios
   

   使用方法：在 main.js 中引入 axios，引入之后挂载到 vue 原型上，方便所有组件使用

   在main.js 中加入如下代码

   // 引入 axios
   import axios from 'axios'
   // 将 axios 作为 Vue 类的原型对象上的一个属性
   Vue.prototype.$http = axios
   

   配置请求根路径

   每次请求的 url 都写上这个，会导致 url 地址过长，而且后期变更接口非常不方便

   先设置好 axios 请求的根路径

   axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
   

   最终 main.js 中修改成下面这样

   // 引入 axios
   import axios from 'axios'
   // 设置请求根路径
   axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
   // 挂载到 Vue 原型上
   Vue.prototype.$http = axios
   

7、异步改造

很显然，上面的嵌套有点多，主要是因为

• 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 submitForm (form) {
      try {
        // 进行表达校验
        await this.$refs.form.validate()
        const res = await this.$http.post('login', this.loginForm)
        const { status, msg } = res.data.meta
        if (status === 200) {
          const { data: { token } } = res.data
          localStorage.setItem('token', token)
        } else if (status === 400) {
          console.log(msg)
        }
      } catch (err) {
        console.log('验证未通过')
      }
    }
s.$refs.form.validate()
        const res = await this.$http.post('login', this.loginForm)
        const { status, msg } = res.data.meta
        if (status === 200) {
          const { data: { token } } = res.data
          localStorage.setItem('token', token)
        } else if (status === 400) {
          console.log(msg)
        }
      } catch (err) {
        console.log('验证未通过')
      }
    }