IDEA后端运行结果如下
VScode前端运行代码如下
<template>
<div class="login-wrap">
<div class="ms-title"><p>药品进销存系统登录</p></div>
<div class="ms-login">
<el-tabs type="border-card">
<el-tab-pane label="密码登录">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="ruleForm.password" placeholder="密码" @keyup.enter.native="submitForm"></el-input>
</el-form-item>
<el-form-item prop="usertype">
<el-select v-model="ruleForm.usertype" placeholder="用户类别">
<el-option label="社区干部" value="1"></el-option>
<el-option label="社区居民" value="0"></el-option>
</el-select>
</el-form-item>
<div class="tag_left">
<el-tag type="error" effect="light" @click.native="connectMe()"> 忘记密码 </el-tag>
<el-tag type="primary" @click.native=" centerDialogVisible=true">注册新账户</el-tag>
</div>
<div class="login-btn">
<el-button type="primary" @click="submitForm">登录</el-button>
</div>
</el-form>
</el-tab-pane>
<el-tab-pane label="扫码登录">扫码登录</el-tab-pane>
</el-tabs>
<el-dialog title="添加新用户" :visible.sync="centerDialogVisible" width="600px" center>
<el-form :model="registerForm" ref="registerForm" label-width="100px" :rules="rules">
<el-form-item prop="userName" label="用户名" size="mini">
<el-input v-model="registerForm.userName" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="passWord" label="密码" size="mini">
<el-input type="password" v-model="registerForm.passWord" placeholder="密码"></el-input>
</el-form-item>
<el-form-item prop="jmsfz" label="居民身份证" size="mini">
<el-input v-model="registerForm.jmsfz" placeholder="居民身份证"></el-input>
</el-form-item>
<el-form-item prop="xm" label="真实姓名" size="mini">
<el-input v-model="registerForm.xm" placeholder="真实姓名"></el-input>
</el-form-item>
<el-form-item prop="nickName" label="昵称" size="mini">
<el-input v-model="registerForm.nickName" placeholder="用户昵称"></el-input>
</el-form-item>
<el-form-item label="性别" size="mini">
<el-radio-group v-model="ssex">
<el-radio :label="0">男</el-radio>
<el-radio :label="1">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="mz" label="民族" size="mini">
<el-select v-model="registerForm.mz" placeholder="民族">
<el-option v-for="(item,index) in mzOptions"
:key="index" :label="item" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="birth" label="出生日期" size="mini">
<el-date-picker type="date" placeholder="选择日期"
v-model="registerForm.birth" value-format="yyyy-MM-dd"
size="small" style="width: 100%;" ></el-date-picker>
</el-form-item>
<el-form-item prop="jzdzldh" label="楼栋号" size="mini">
<el-input v-model="registerForm.jzdzldh" placeholder="楼栋号"></el-input>
</el-form-item>
<el-form-item prop="jzdzlcs" label="楼层号" size="mini">
<el-input v-model="registerForm.jzdzlcs" placeholder="楼层号"></el-input>
</el-form-item>
<el-form-item prop="jzdzfh" label="房号" size="mini">
<el-input v-model="registerForm.jzdzfh" placeholder="房号"></el-input>
</el-form-item>
<el-form-item prop="phoneNum" label="联系电话" size="mini">
<el-input v-model="registerForm.phoneNum" placeholder="联系电话"></el-input>
</el-form-item>
<el-form-item prop="jkqk" label="健康情况">
<el-select v-model="registerForm.jkqk" placeholder="健康情况">
<el-option label="正常" value="正常"></el-option>
<el-option label="感染" value="感染"></el-option>
<el-option label="冠心病" value="冠心病"></el-option>
<el-option label="脑卒中" value="脑卒中"></el-option>
<el-option label="高血压" value="高血压"></el-option>
<el-option label="慢阻肺" value="慢阻肺"></el-option>
<el-option label="糖尿病" value="糖尿病"></el-option>
<el-option label="慢性肾病" value="慢性肾病"></el-option>
<el-option label="肿瘤" value="肿瘤"></el-option>
<el-option label="免疫功能缺陷" value="免疫功能缺陷"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="cxzt" label="出行状态">
<el-select v-model="registerForm.cxzt" placeholder="出行状态">
<el-option label="自由出行" value="自由出行"></el-option>
<el-option label="密接隔离" value="密接隔离"></el-option>
<el-option label="感染隔离" value="感染隔离"></el-option>
<el-option label="出行不便" value="出行不便"></el-option>
<el-option label="瘫痪" value="瘫痪"></el-option>
<el-option label="高龄" value="高龄"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="bhgbid" label="包户干部ID">
<el-select v-model="registerForm.bhgbid" placeholder="包户干部ID" >
<el-option
v-for="(item) in pIdSqgbNameOptions"
:key="item.sqgbId"
:label="item.sqgbName"
:value="item.sqgbId"
></el-option>
</el-select>
</el-form-item>
<el-form-item prop="ssxq" label="所属小区" size="mini">
<el-input v-model="registerForm.ssxq" placeholder="所属小区"></el-input>
</el-form-item>
<el-form-item prop="sssq" label="所属社区" size="mini">
<el-input v-model="registerForm.sssq" placeholder="所属社区"></el-input>
</el-form-item>
<el-form-item prop="ssdzs" label="所属地州市" size="mini">
<el-input v-model="registerForm.ssdzs" placeholder="所属地州市"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<el-button size="mini" @click="addSqjm">确定</el-button>
<el-button size="mini" @click="centerDialogVisible=false">取消</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import {mixin} from "../mixins/index";
import {getSqgb,getSqgbLoginStatus,getSqjmLoginStatus,setSqjm} from "../api/index";
export default {
mixins:[mixin],
data: function(){
return {
pIdSqgbNameOptions:[],
pIdSqgbName:{},
mzOptions:['汉族','维吾尔族','回族','蒙古族','哈萨克族','塔塔尔族','锡伯族','柯尔克孜族','俄罗斯族',],
ssex:0,
centerDialogVisible:false,//添加弹窗是否显示
registerForm:{//添加框
jmsfz:'',
userName:'',
passWord:'',
nickName:'',
xm:'',
sex:0,
mz:'汉族',
birth:'2000-01-01',
jzdzldh:'',
jzdzlcs:'',
jzdzfh:'',
phoneNum:'',
jkqk:'正常',
cxzt:'自由出行',
bhgbid:'',
bhgbxm:'',
ssxq:'',
sssq:'',
ssdzs:'乌鲁木齐市',
avator:''
},
ruleForm:{
username: "abc",
password: "1#3@",
usertype: "1",
},
rules:{
username:[
{required:true,message:"请输入用户名",trigger:"blur"}//blur失去焦点触发
],
password:[
{required:true,message:"请输入密码",trigger:"blur"},
{min:3,message:"密码最小长度3个字符",trigger:"blur"},
],
usertype:[
{required:true,message:"请输入用户类别",trigger:"blur"}//blur失去焦点触发
]
}
};
},
created(){
this.pIdSqgbNameOptions=[];
getSqgb().then(res=>{
if(res.length>0){
res.forEach((item) => {
let temp={};
temp["sqgbId"]=item.sqgbId;
temp["sqgbName"]=item.sqgbName;
this.pIdSqgbNameOptions.push(temp);
this.pIdSqgbName[item.sqgbId]=item.sqgbName;
});
}
});
},
methods:{
submitForm(){
// alert("提交")
let params = new URLSearchParams();
params.append("aname",this.ruleForm.username);
params.append("password",this.ruleForm.password);
params.append("usertype",this.ruleForm.usertype);
//后台用requestBody参数调用
if(this.ruleForm.usertype=="1"){ //1 社区干部登录 0 社区居民登录
getSqgbLoginStatus(params)
.then((res) =>{
if(res.code == 1){
this.$store.commit("SET_USERINFO",res.data.user);
this.$router.push("/Info");
this.notify("登录成功","success");
}else{
//console.log(res);
this.notify("用户名或密码有误,登录失败","error");
}
});
}else{
getSqjmLoginStatus(params)
.then((res) =>{
if(res.code == 1){
this.$store.commit("SET_USERINFO",res.data.user);
this.$router.push("/Info");
this.notify("登录成功","success");
}else{
//console.log(res);
this.notify("用户名或密码有误,登录失败","error");
}
});
}
},
//添加用户
addSqjm(){
(this.$refs['registerForm'] ).validate(valid=>{
if(valid){
// let d = this.registerForm.birth;
// let datetime = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
let params = new URLSearchParams();
params.append('jmsfz',this.registerForm.jmsfz);
params.append('userName',this.registerForm.userName);
params.append('passWord',this.registerForm.passWord);
params.append('nickName',this.registerForm.nickName);
params.append('xm',this.registerForm.xm);
params.append('xb',this.ssex);
params.append('mz',this.registerForm.mz);
params.append('birth',this.registerForm.birth);
params.append('jzdzldh',this.registerForm.jzdzldh);
params.append('jzdzlcs',this.registerForm.jzdzlcs);
params.append('jzdzfh',this.registerForm.jzdzfh);
params.append('phoneNum',this.registerForm.phoneNum);
params.append('jkqk',this.registerForm.jkqk);
params.append('cxzt',this.registerForm.cxzt);
params.append('bhgbid',this.registerForm.bhgbid);
params.append('bhgbxm',this.pIdSqgbName[this.registerForm.bhgbid]);
params.append('ssxq',this.registerForm.ssxq);
params.append('sssq',this.registerForm.sssq);
params.append('ssdzs',this.registerForm.ssdzs);
params.append('avator','/avatorImages/user.jpg');
setSqjm(params)
.then(res=>{
if(res.code == 1){
//this.getData();
//console.log(res.msg);
this.notify(res.msg,"success");
}else{
this.notify(res.msg,"error");
}
})
.catch(err =>{
console.log(err);
});
this.centerDialogVisible=false;
}
})
},
connectMe(){
this.$alert('<b>电话:</b>13292139696<br/><br/><b>QQ:</b>928960882<br/><br/><b>上课地点:</b>新疆医科大学雪莲山校区教学楼C309<br/>', '丢失密码请联系我', {
confirmButtonText: '确定',
dangerouslyUseHTMLString: true
});
},
}
}
</script>
<style scoped>
.login-wrap {
position: relative;
background: url("../assets/img/zj.jpg");
background-attachment: fixed;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
}
.ms-title {
position: absolute;
top: 50%;
width: 100%;
margin-top: -230px;
text-align: center;
font-size: 30px;
font-weight: 600;
color: #fff;
}
.ms-login {
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 300px;
margin-left: -280px;
margin-top: -150px; /* margin-top: -150px; */
padding: 40px;
border-radius: 5px;
background: #fff;
}
.login-btn {
text-align: right;
}
.login-btn button {
width: 30%;
height: 36px;
}
.tag_left{
text-align: left;
}
</style>
目前问题是前端的登录界面可以运行,但是点击“登录”后的功能界面无法运行,
以下是功能界面的代码:
<template>
<div class="sidebar">
<el-menu
class="sidebar-el-menu"
:default-active="onRoutes"
:collapse="collapse"
background-color="#336699"
text-color="#ffffff"
active-text-color="#ffff00"
router
>
<template v-for="item in items">
<template>
<el-menu-item :index="item.index" :key="item.index">
<i :class="item.icon"></i>
{{item.title}}
</el-menu-item>
</template>
</template>
</el-menu>
</div>
</template>
<script>
import bus from "../assets/js/bus"
export default {
data(){
return{
collapse:false,
items:[
{
icon: 'el-icon-document',
index: '/Info',
title: '系统首页'
},
{
icon: 'el-icon-document',
index: '/SqjmInfo',
title: '社区居民信息'
},
{
icon: 'el-icon-document',
index: '/SqwzInfo',
title: '物资信息浏览'
},
{
icon: 'el-icon-document',
index: '/SqwzGyInfo',
title: '物资供应发布'
},
{
icon: 'el-icon-document',
index: '/SqwzDg',
title: '物资订购'
},
{
icon: 'el-icon-document',
index: '/Sqwzps',
title: '物资配送'
},
{
icon: 'el-icon-document',
index: '/SqwzpsTj',
title: '物资配送统计'
},
]
}
},
computed:{
onRoutes(){
//return this.$route.path.replace("/","");
}
},
created(){
//通过bus进行组件间的通信,来折叠侧边框
bus.$on('collapse',msg=>{//接收header中发来的信息
this.collapse=msg;
})
}
}
</script>
<style scoped>
.sidebar{
display: block;
position:absolute;
left:0;
top:70px;
bottom: 0;
background-color: #99ccff;
overflow-y: scroll;
}
.sidebar::-webkit-scrollbar{
width: 0;
}
.sidebar >ul{
height: 100%;
}
.sidebar-el-menu:not(.el-menu--collapse){
width: 150px;
}
</style>
<template>
<div class="header">
<!-- 折叠图片 -->
<div class="collapse-btn" @click="collapseChange">
<i class="el-icon-menu"></i>
</div>
<!-- <div class="logo">医学图像处理实验仿真平台</div> -->
<div class="logo">重大疫情条件下社区物资配送系统</div>
<div class="header-right">
<div class="btn-fullscreen" @click="handleFullScreen">
<el-tooltip :content="fullscreen?'取消全屏':'全屏'" placement="bottom">
<i class="el-icon-rank"></i>
</el-tooltip>
</div>
<div class="user-avator">
<!-- <img src="../assets/img/user.jpg" /> -->
<img :src="avatorimg">
</div>
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{nickName}}
<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import bus from "../assets/js/bus"
import {mixin} from "../mixins/index";
import {getSqgbLoginOut,getSqjmLoginOut} from "../api/index";
export default {
mixins:[mixin],
data(){
return{
userType:'',
nickName:'',
avatorimg:'../assets/img/user.jpeg',
collapse:false,
fullscreen:false,
}
},
computed:{
userName(){
//return localStorage.getItem("userName");
return this.$store.getters.getUser.userName;
}
},
created(){
this.getNickName();
this.getAvatorName();
this.getUserType();
},
methods:{
getNickName(){
this.nickName = this.$store.getters.getUser.nickName;
},
getAvatorName(){
console.log("img--->",this.$store.getters.getUser.avatorUrl);
if (this.$store.getters.getUser){
this.avatorimg=`${this.$store.state.HOST}`+this.$store.getters.getUser.avatorUrl;
console.log("avator===>>>"+this.avatorimg);
}
},
getUserType(){
this.userType = this.$store.getters.getUser.userType;
},
//侧边栏折叠
collapseChange(){
this.collapse=!this.collapse;
bus.$emit('collapse',this.collapse);
},
//全屏事件
handleFullScreen(){
if(this.fullscreen){
if(document.exitFullscreen){
document.exitFullscreen();
}else if(document.webkitCancelFullScreen){ //safari,chrome浏览器
document.webkitCancelFullScreen();
}else if(document.mozCancelFullScreen){ //firefox浏览器
document.mozCancelFullScreen();
}else if(document.msExitFullScreen){ //IE浏览器
document.msExitFullScreen();
}
}else{
let element=document.documentElement;
if(element.requestFullscreen){
element.requestFullscreen();
}else if(element.webkitRequestFullScreen){//safari,chrome浏览器
element.webkitRequestFullScreen();
}else if(element.mozRequestFullScreen){//firefox浏览器
element.mozRequestFullScreen();
}else if(element.msRequestFullScreen){//IE浏览器
element.msRequestFullScreen();
}
}
this.fullscreen=!this.fullscreen;
},
handleCommand(command){
if(command=="logout"){
let params = new URLSearchParams();
//params.append("aname",localStorage.getItem('userName'));
params.append("aname",this.$store.getters.getUser.nickName);
//var userid=localStorage.getItem('userName');
var userType = this.$store.getters.getUser.userType;
if (userType==1){
getSqgbLoginOut(params)
.then((res) =>{
if(res.code == 1){
console.log(res.msg);
this.notify(res.msg,"success");
//this.notify("登出成功","success");
}else{
console.log(res.msg);
this.notify("用户不存在,登出失败","error");
}
});
}else{
getSqjmLoginOut(params)
.then((res) =>{
if(res.code == 1){
console.log(res.msg);
this.notify(res.msg,"success");
//this.notify("登出成功","success");
}else{
console.log(res.msg);
this.notify("用户不存在,登出失败","error");
}
});
}
localStorage.removeItem("userInfo");
this.$router.push("/");
}
}
}
}
</script>
<style scoped>
.header{
position: relative;
/* background-color: #253041; */
background-color: #006699;
box-sizing: border-box;
width: 100%;
height: 70px;
font-size: 22px;
color:#ffffff
}
.collapse-btn{
float: left;
padding:0 21px;
cursor:pointer;
line-height: 70px;
}
.header .logo{
float: left;
line-height: 70px;
}
.header-right{
float: right;
padding-right: 50px;
display: flex;
height:70px;
align-items: center;
}
.btn-fullscreen{
transform: rotate(45deg);
margin-right: 5px;
font-size:24px ;
}
.user-avator{
margin-left: 20px;
}
.user-avator img{
display: block;
width:40px;
height:40px;
border-radius: 50%;
}
.user-name{
margin-left: 10px;
}
.el-dropdown-link{
color:#ffffff;
cursor: pointer;
}
</style>