月考

.eslintignore

@@ -2,3 +2,4 @@ build/*.js
 src/assets
 public
 dist
+*

src/api/cart.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export function list() {
+  return request({
+    url: '/goods/list',
+    method: 'get',
+
+  })
+}

src/api/user.js

@@ -2,15 +2,28 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
-    url: '/vue-admin-template/user/login',
+    url: '/auth/login',
     method: 'post',
     data
   })
 }
+export function enroll(data) {
+  return request({
+    url: '/auth/enroll',
+    method: 'post',
+    data
+  })
+}
+export function sendCode(phone) {
+  return request({
+    url: '/auth/sendCode/'+phone,
+    method: 'post',
+  })
+}
 
 export function getInfo(token) {
   return request({
-    url: '/vue-admin-template/user/info',
+    url: '/auth/getInfo',
     method: 'get',
     params: { token }
   })

src/router/index.js

@@ -89,6 +89,53 @@ export const constantRoutes = [
       }
     ]
   },
+{
+    path: '/shop',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'shop',
+        component: () => import('@/views/shop/index'),
+        meta: { title: 'shop', icon: 'form' }
+      }
+    ]
+  },
+{
+    path: '/death',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'death',
+        component: () => import('@/views/death/index'),
+        meta: { title: 'death', icon: 'form' }
+      }
+    ]
+  },
+{
+    path: '/goods',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'goods',
+        component: () => import('@/views/goods/index'),
+        meta: { title: 'goods', icon: 'form' }
+      }
+    ]
+  },{
+    path: '/cart',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'cart',
+        component: () => import('@/views/cart/index'),
+        meta: { title: 'cart', icon: 'form' }
+      }
+    ]
+  },
 
   {
     path: '/nested',

src/store/modules/user.js

@@ -30,9 +30,9 @@ const mutations = {
 const actions = {
   // user login
   login({ commit }, userInfo) {
-    const { username, password } = userInfo
+    const { phone, password } = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
+      login({ phone: phone.trim(), password: password }).then(response => {
         const { data } = response
         commit('SET_TOKEN', data.token)
         setToken(data.token)

src/utils/request.js

@@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000 // request timeout
+  timeout: 50000 // request timeout
 })
 
 // request interceptor
@@ -19,7 +19,7 @@ service.interceptors.request.use(
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
+      config.headers['token'] = getToken()
     }
     return config
   },
@@ -46,15 +46,15 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
+    if (res.code !== 200) {
       Message({
-        message: res.message || 'Error',
+        message: res.msg || 'Error',
         type: 'error',
         duration: 5 * 1000
       })
 
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      if (res.code === 508 || res.code === 512 || res.code === 514) {
         // to re-login
         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
           confirmButtonText: 'Re-Login',
@@ -66,7 +66,7 @@ service.interceptors.response.use(
           })
         })
       }
-      return Promise.reject(new Error(res.message || 'Error'))
+      return Promise.reject(new Error(res.msg || 'Error'))
     } else {
       return res
     }
@@ -74,7 +74,7 @@ service.interceptors.response.use(
   error => {
     console.log('err' + error) // for debug
     Message({
-      message: error.message,
+      message: error.msg,
       type: 'error',
       duration: 5 * 1000
     })

src/views/cart/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <el-table :data="tableData"
+              style="width: 100%">
+      <el-table-column label="编号" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.id}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.id}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="原价" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.originalPrice}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="秒杀价" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.instantPrice}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="数量" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.num}}</span>
+        </template>
+      </el-table-column>
+  <el-table-column label="小鸡" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.num*scope.row.instantPrice}}</span>
+        </template>
+      </el-table-column>
+
+
+    </el-table>
+    总价：{{sum}}
+  </div>
+</template>
+
+<script>
+
+
+import {list} from "@/api/cart";
+
+export default {
+
+  data() {
+    return {
+      sum:0,
+      tableData: [],
+      cart:{},
+    }
+  },
+  created() {
+    this.list()
+  },
+  methods: {
+    list() {
+      list().then(
+        res=>{
+          this.tableData=res.data;
+          this.tableData.forEach(
+            res=>{
+              // console.log()
+              this.sum+=res.num*res.instantPrice;
+            }
+          )
+        }
+      )
+    },
+
+  }
+}
+</script>

src/views/goods/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <el-button type="text" @click="adds(dialogVisible = true)">点击打开 Dialog</el-button>
+    <el-table :data="tableData"
+              style="width: 100%">
+      <el-table-column label="编号" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.id}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="名称" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.name}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="图片" width="180">
+        <template slot-scope="scope">
+          <img :src="scope.row.imgPath" width="100" height="100">
+        </template>
+      </el-table-column>
+
+      <el-table-column label="原价" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.originalPrice}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="秒杀价" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.instantPrice}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="handleEdit(dialogVisible = true,scope.row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose">
+
+
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="开始时间">
+          <el-input v-model="form.startTime"></el-input>
+        </el-form-item>
+        <el-form-item label="结束时间">
+          <el-input v-model="form.endTime"></el-input>
+        </el-form-item>
+        <el-form-item label="原价">
+          <el-input v-model="form.originalPrice"></el-input>
+        </el-form-item>
+        <el-form-item label="秒杀价格">
+          <el-input v-model="form.instantPrice"></el-input>
+        </el-form-item>
+        <el-form-item label="名字">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="add">添加</el-button>
+          <el-button type="primary" @click="upd">加入购物车</el-button>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+  </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+
+
+import {add, goodsList, upd} from "@/api/goods";
+
+export default {
+
+  data() {
+    return {
+      dialogVisible:false,
+      tableData: [],
+      death:{},
+      form:{},
+    }
+  },
+  created() {
+    this.goodsList()
+  },
+  methods: {
+    goodsList() {
+      goodsList().then(
+        res=>{
+          this.tableData=res.data;
+        }
+      )
+    },
+    adds(dialogVisible){
+      this.dialogVisible=true
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+    handleEdit(dialogVisible,death){
+      this.dialogVisible=true;
+      this.form=death;
+    },
+    add(){
+      add(this.form).then(
+        res=>{
+          alert(res.msg)
+        }
+      )
+    },
+    upd(){
+      upd(this.form).then(
+        res=>{
+          alert(res.msg)
+        }
+      )
+    },
+  }
+}
+</script>

src/views/login/index.vue

@@ -1,85 +1,134 @@
 <template>
+
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+    <el-tab-pane label="登录页面" name="first">
+      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
-      <div class="title-container">
-        <h3 class="title">Login Form</h3>
-      </div>
+        <div class="title-container">
+          <h3 class="title">登录页面</h3>
+        </div>
 
-      <el-form-item prop="username">
+        <el-form-item prop="phone">
         <span class="svg-container">
           <svg-icon icon-class="user" />
         </span>
-        <el-input
-          ref="username"
-          v-model="loginForm.username"
-          placeholder="Username"
-          name="username"
-          type="text"
-          tabindex="1"
-          auto-complete="on"
-        />
-      </el-form-item>
+          <el-input
+            ref="phone"
+            v-model="loginForm.phone"
+            placeholder="Username"
+            name="phone"
+            type="text"
+            tabindex="1"
+            auto-complete="on"
+          />
+        </el-form-item>
 
-      <el-form-item prop="password">
+        <el-form-item prop="password">
         <span class="svg-container">
           <svg-icon icon-class="password" />
         </span>
-        <el-input
-          :key="passwordType"
-          ref="password"
-          v-model="loginForm.password"
-          :type="passwordType"
-          placeholder="Password"
-          name="password"
-          tabindex="2"
-          auto-complete="on"
-          @keyup.enter.native="handleLogin"
-        />
-        <span class="show-pwd" @click="showPwd">
+          <el-input
+            :key="passwordType"
+            ref="password"
+            v-model="loginForm.password"
+            :type="passwordType"
+            placeholder="Password"
+            name="password"
+            tabindex="2"
+            auto-complete="on"
+            @keyup.enter.native="handleLogin"
+          />
+          <span class="show-pwd" @click="showPwd">
           <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
         </span>
-      </el-form-item>
+        </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+        <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
 
-      <div class="tips">
-        <span style="margin-right:20px;">username: admin</span>
-        <span> password: any</span>
-      </div>
+      </el-form>
+    </el-tab-pane>
+    <el-tab-pane label="注册页面" name="second">
+      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+
+        <div class="title-container">
+          <h3 class="title"> 注册页面</h3>
+        </div>
+
+        <el-form-item prop="phone">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+          <el-input
+            ref="phone"
+            v-model="loginForm.phone"
+            placeholder="Username"
+            name="phone"
+            type="text"
+            tabindex="1"
+            auto-complete="on"
+          />
+        </el-form-item>
+
+        <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+          <el-input
+            :key="passwordType"
+            ref="password"
+            v-model="loginForm.password"
+            :type="passwordType"
+            placeholder="Password"
+            name="password"
+            tabindex="2"
+            auto-complete="on"
+            @keyup.enter.native="handleLogin"
+          />
+          <span class="show-pwd" @click="showPwd">
+          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+        </span>
+        </el-form-item>
+        <el-form-item prop="code">
+        <span class="svg-container">
+          <svg-icon icon-class="code" />
+        </span>
+          <el-input
+            ref="code"
+            v-model="loginForm.code"
+            placeholder="code"
+            name="code"
+            type="text"
+            tabindex="1"
+            auto-complete="on"
+          />
+        </el-form-item>
+        <el-button :loading="loading" type="primary" style="width:48%;margin-bottom:30px;" @click.native.prevent="sendCode">发送验证码</el-button>
+        <el-button :loading="loading" type="primary" style="width:48%;margin-bottom:30px;" @click.native.prevent="enroll">注册</el-button>
+      </el-form>
+    </el-tab-pane>
+  </el-tabs>
 
-    </el-form>
   </div>
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
+
+import {enroll, sendCode} from "@/api/user";
 
 export default {
   name: 'Login',
   data() {
-    const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
-      } else {
-        callback()
-      }
-    }
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
-      } else {
-        callback()
-      }
-    }
+
     return {
+      activeName: 'first',
       loginForm: {
-        username: 'admin',
-        password: '111111'
+        phone: '123',
+        password: 'admin'
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+        phone: [{ required: true, trigger: 'blur' }],
+        password: [{ required: true, trigger: 'blur'}]
       },
       loading: false,
       passwordType: 'password',
@@ -95,6 +144,23 @@ export default {
     }
   },
   methods: {
+    sendCode(){
+      sendCode(this.loginForm.phone).then(
+        res=>{
+          this.$message.success(res.msg);
+        }
+      )
+    },
+    enroll(){
+      enroll(this.loginForm).then(
+        res=>{
+          this.$message.success(res.msg);
+        }
+      )
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
     showPwd() {
       if (this.passwordType === 'password') {
         this.passwordType = ''

vue.config.js

@@ -36,7 +36,16 @@ module.exports = {
       warnings: false,
       errors: true
     },
-    before: require('./mock/mock-server.js')
+    proxy: {
+      [process.env.VUE_APP_BASE_API]: {
+        target: 'http://127.0.0.1:18080',
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      }
+    }
+
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that