IDEA2023后端和VScode前端连接

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()">&nbsp;&nbsp;忘记密码&nbsp;&nbsp;</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>