master
parent
4c18a3f47b
commit
0e5fdf03b1
|
|
@ -2,3 +2,4 @@ build/*.js
|
|||
src/assets
|
||||
public
|
||||
dist
|
||||
*
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import request from "@/utils/request";
|
||||
|
||||
export function list() {
|
||||
return request({
|
||||
url: '/goods/list',
|
||||
method: 'get',
|
||||
|
||||
})
|
||||
}
|
||||
|
|
@ -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 }
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,20 +1,23 @@
|
|||
<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">Login Form</h3>
|
||||
<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"
|
||||
ref="phone"
|
||||
v-model="loginForm.phone"
|
||||
placeholder="Username"
|
||||
name="username"
|
||||
name="phone"
|
||||
type="text"
|
||||
tabindex="1"
|
||||
auto-complete="on"
|
||||
|
|
@ -43,43 +46,89 @@
|
|||
|
||||
<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>
|
||||
</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>
|
||||
|
||||
</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 = ''
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue