.eslintignore

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

README-zh.md

@@ -8,15 +8,6 @@
 
 目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。
 
-<p align="center">
-  <b>SPONSORED BY</b>
-</p>
-<p align="center">
-   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
-      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
-   </a>
-</p>
-
 ## Extra
 
 如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)

README.md

@@ -9,17 +9,9 @@ English | [简体中文](./README-zh.md)
 
 **The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**
 
-<p align="center">
-  <b>SPONSORED BY</b>
-</p>
-<p align="center">
-   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
-      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
-   </a>
-</p>
-
 ## Build Setup
 
+
 ```bash
 # clone the project
 git clone https://github.com/PanJiaChen/vue-admin-template.git

src/api/cart.js

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

src/api/user.js

@@ -2,28 +2,15 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
-    url: '/auth/login',
+    url: '/vue-admin-template/user/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: '/auth/getInfo',
+    url: '/vue-admin-template/user/info',
     method: 'get',
     params: { token }
   })

src/router/index.js

@@ -89,53 +89,6 @@ 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',
@@ -190,7 +143,6 @@ export const constantRoutes = [
       {
         path: 'menu2',
         component: () => import('@/views/nested/menu2/index'),
-        name: 'Menu2',
         meta: { title: 'menu2' }
       }
     ]

src/store/modules/user.js

@@ -30,9 +30,9 @@ const mutations = {
 const actions = {
   // user login
   login({ commit }, userInfo) {
-    const { phone, password } = userInfo
+    const { username, password } = userInfo
     return new Promise((resolve, reject) => {
-      login({ phone: phone.trim(), password: password }).then(response => {
+      login({ username: username.trim(), password: password }).then(response => {
         const { data } = response
         commit('SET_TOKEN', data.token)
         setToken(data.token)
@@ -50,7 +50,7 @@ const actions = {
         const { data } = response
 
         if (!data) {
-          return reject('Verification failed, please Login again.')
+          reject('Verification failed, please Login again.')
         }
 
         const { name, avatar } = data

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: 50000 // request timeout
+  timeout: 5000 // 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['token'] = getToken()
+      config.headers['X-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 !== 200) {
+    if (res.code !== 20000) {
       Message({
-        message: res.msg || 'Error',
+        message: res.message || 'Error',
         type: 'error',
         duration: 5 * 1000
       })
 
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 508 || res.code === 512 || res.code === 514) {
+      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         // 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.msg || 'Error'))
+      return Promise.reject(new Error(res.message || 'Error'))
     } else {
       return res
     }
@@ -74,7 +74,7 @@ service.interceptors.response.use(
   error => {
     console.log('err' + error) // for debug
     Message({
-      message: error.msg,
+      message: error.message,
       type: 'error',
       duration: 5 * 1000
     })

src/views/cart/index.vue

@@ -1,77 +0,0 @@
-<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

@@ -1,138 +0,0 @@
-<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,23 +1,20 @@
 <template>
-
   <div class="login-container">
-    <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">登录页面</h3>
+        <h3 class="title">Login Form</h3>
       </div>
 
-        <el-form-item prop="phone">
+      <el-form-item prop="username">
         <span class="svg-container">
           <svg-icon icon-class="user" />
         </span>
         <el-input
-            ref="phone"
+          ref="username"
-            v-model="loginForm.phone"
+          v-model="loginForm.username"
           placeholder="Username"
-            name="phone"
+          name="username"
           type="text"
           tabindex="1"
           auto-complete="on"
@@ -46,89 +43,43 @@
 
       <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
 
-      </el-form>
+      <div class="tips">
-    </el-tab-pane>
+        <span style="margin-right:20px;">username: admin</span>
-    <el-tab-pane label="注册页面" name="second">
+        <span> password: any</span>
-      <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>
-
   </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: {
-        phone: '123',
+        username: 'admin',
-        password: 'admin'
+        password: '111111'
       },
       loginRules: {
-        phone: [{ required: true, trigger: 'blur' }],
+        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur'}]
+        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
       },
       loading: false,
       passwordType: 'password',
@@ -144,23 +95,6 @@ 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,16 +36,7 @@ module.exports = {
       warnings: false,
       errors: true
     },
-    proxy: {
+    before: require('./mock/mock-server.js')
-      [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