1接口弄好 以后 开始用前端的登录页面 采用elementui 回到前端工程目录
2:配置反向代理 方便跨域请求 在项目中新建vue.config.js 里面写入
module.exports = {
publicPath: "./",
assetsDir: "static",
outputDir: 'dist',
lintOnSave: false,
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite:{
'^/api' : ''
}
},
'/foo': {
target: '<other_url>'
}
}
}
};
3:安装axios 并做好axios的配置 npm i axios -S
在项目中新建axios.js 做好axios的常用配置
import axios from "axios";
//拦截器的配置
//请求头拦截
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
if(window.localStorage.getItem("token")){
config.headers.common["token"]=window.localStorage.getItem("token")
}
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
//响应头拦截
axios.interceptors.response.use(response => {
return response;
},error => {
if (error.response) {
switch (error.response.status) {
// 返回401,清除token信息并跳转到登录页面
case 404:
alert("跳到错误页面");
break;
case 500:
alert("接口调用错误")
break;
}
// 返回接口返回的错误信息
return Promise.reject(error.response.data);
}
});
export default axios;
4:同级目录下新建user.js用来做业务的分离
import axios from "./axios";
import qs from "qs";
let user = {
login:(username,userpwd)=>{//用户登录
return axios({
method:"get",
url:"/api/users/login",
params:{
username,
userpwd
}
})
},
register:(info)=>{//注册
return axios({
method:"post",
url:"/api/users/register",
data:qs.stringify(info)
})
},
addmany:(list)=>{//批量新增
return axios({
method:"post",
url:"/api/users/addmany",
data:qs.stringify(list)
})
}
}
export default user;
5:使用 elemen-ui 先安装 npm i element-ui -S
6:先弄全局配置 在main.js中
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
7:修改Home.vue当做首页来写
里面有表单验证和数据提交
<template>
<div class="home">
<h1>27极简管理系统</h1>
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="username">
<el-input type="text" v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="userpwd">
<el-input
type="password"
v-model="ruleForm.userpwd"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>登录</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import user from "../../model/userinfo";
export default {
data() {
return {
ruleForm: {
username: "",
userpwd: ""
},
rules: {
username: [
{ required: true, message: "用户名不能为空", trigger: "blur" },
{
pattern: /^[0-9a-z]{2,10}$/i,
message: "只能是数字字母组成长度2到10",
trigger: "blur"
}
],
userpwd: [
{ required: true, message: "密码不能为空", trigger: "blur" },
{
pattern: /^[0-9a-z]{5,10}$/i,
message: "只能是数字字母组成长度5到10",
trigger: "blur"
}
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
//alert("submit!"+this.ruleForm.username);
user
.login(this.ruleForm.username, this.ruleForm.userpwd)
.then(result => {
if (result.data.code == 1) {
window.localStorage.setItem("username",this.ruleForm.username);
window.localStorage.setItem("token",result.data.token);
this.$router.push({name:"menu"})
} else {
this.$message.error(result.data.msg);
}
});
} else {
this.$message.error("注意红色提示");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
<style scoped>
.home{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 50%;
margin: auto;
}
</style>
弄完后效果如图