本例子中使用vue脚手架构建SPA项目,详细演示了vue组件开发,组件之间的参数传递、表单验证、数据双向绑定、列表渲染、使用VUEX进行全局变量状态控制、使用axios与webapi进行数据交换,此教程不仅仅讲解了前端,还深入讲解了数据库设计及后台管理系统开发,例如后台登录模块、产品发布模块、订单管理模块、用户管理等模块等,为了演示接口创建和调用,全程演示了webapi的创建和部署。通过本套教程的学习,你不仅可以学到vue的高级知识,还能学到数据库设计、后台管理系统开发、webapi的提供和调用等大型项目中必须掌握的关键技术。

先看界面:

 

 

 

 

 

基于VUE开发的,可能对于初学的朋友来说,有点困难,建议先学习下VUE基础教程

下面将分别介绍各模块:

一、注册模块:

<template>
<div class="wrapper">
<Header :isHideSettingBtn="true"/>
<div class="main">
  <div class="login">
    <p><input type="text" class="txt" v-model="LoginName" placeholder="用户名" id="LoginName" /></p>
    <p><input type="password" class="txt" v-model="PassWord" placeholder="密码" id="PassWord" /></p>
    <p><input type="text" class="txt" v-model="TrueName" placeholder="真实姓名" id="TrueName" /></p>
    <p><input type="text" class="txt" v-model="Tel" placeholder="手机号" id="Tel" /></p>
    <p><input type="button" @click="userreg" value="注册" class="btnlogin" /></p>
    <p class="tipmsg">{{tipmsg}}</p>
  </div>
</div>
<Footer/>
</div>
</template>

<script>

import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default {
  name: 'UserReg',
  data () {
    return {
      tipmsg:'',
      LoginName:'',
      PassWord:'',
      TrueName:'',
      Tel:''
    }
  },
  components:{
    Header,
    Footer
  },
  methods:{
    userreg:function () {
        var that=this;
        var webapiip=this.$store.getters.webapiip;
        this.tipmsg="";
        var LoginName=this.LoginName;
        var PassWord=this.PassWord;
        var TrueName=this.TrueName;
        var Tel=this.Tel;

        if(!(LoginName.length>0))
        {
            document.getElementById("LoginName").focus();
            this.tipmsg="请输入用户名!";
            return;
        }
        if(!(PassWord.length>0))
        {
            document.getElementById("PassWord").focus();
            this.tipmsg="请输入密码!";
            return;
        }
        if(!(TrueName.length>0))
        {
            document.getElementById("TrueName").focus();
            this.tipmsg="请输入真实姓名!";
            return;
        }
        if(!(Tel.length>0))
        {
            document.getElementById("Tel").focus();
            this.tipmsg="请输入电话号码!";
            return;
        }


        this.$ajax({
               method: 'post',
               url: webapiip+'/api/diancan/PostAddUser',
               data: {
                  LoginName:LoginName,
                  PassWord:PassWord,
                  TrueName:TrueName,
                  Tel:Tel
               }
         }).then(res=>{
            console.log(res);

            if(res.data.flag=="0")
            {
                
                this.tipmsg=res.data.data;  
            }
            else
            {
                this.tipmsg="注册成功";
                setTimeout(function(){
                    that.$router.push({
                      name: 'Login'
                    });
                },3000);
            }

            
               
         }).catch(err=>{
                  console.log("错误:"+err);
                  this.tipmsg="错误:"+err;
         });

    }

  }
}
</script>


<style scoped>

.wrapper{
   width:100%;
   height:100%;
}

.main{
  width:100%;
  height:calc(100% - 60px);
  position:fixed;
  top:30px;
  left:0px;
  overflow-y:scroll;
}

.login{
  width:calc(100% - 100px);
  height:200px;
  position:absolute;
  left:50px;
  top:calc(50% - 100px);
}
.main input{
    width:100%;
    height:32px;
    margin-top:5px;
    border:solid 1px #eee;
    border-radius:3px;
    outline:none;
}

.main input.txt{
    width:calc(100% - 5px);
    height:30px;
    margin-top:5px;
    padding-left:3px;
}

.btnlogin{
  background-color:#3CB371;
  color:#fff;
  cursor:pointer;
}
.tipmsg{
  color:red;
}
</style>
 

二、登录模块:

<template>
<div class="wrapper">
<Header :isHideBackBtn="true" :isHideSettingBtn="true"/>
<div class="main">
  <div class="login">
    <p><input type="text" class="txt" v-model="username" placeholder="用户名" id="username" /></p>
    <p><input type="password" class="txt" v-model="password" placeholder="密码" id="password"/></p>
    <p><input type="button" value="登录" @click="login" class="btnlogin" /></p>
    <p><input type="button" value="注册" @click="userreg" class="btnreg" /></p>
    <p class="tipmsg">{{tipmsg}}</p>
  </div>
</div>
<Footer/>
</div>
</template>

<script>

import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default {
  name: 'Login',
  created(){
    this.$store.commit('SET_APPTITLE',"快易乐点餐系统v1.0-登录");

  },
  data () {
    return {
      tipmsg:'',
      username:'',
      password:''
    }
  },
  components:{
    Header,
    Footer
  },
  methods:{
    userreg:function() {
      this.$router.push({name: 'UserReg'});
    },
    login:function(){
        var username=this.username;
        var password=this.password;
        var deskid=this.$route.query.id;
        if(!(username.length>0))
        {
            this.tipmsg="请输入用户名";
            document.getElementById("username").focus();
            return;
        }

        if(!(password.length>0))
        {
            this.tipmsg="请输入密码";
            document.getElementById("password").focus();
            return;
        }

        if(!deskid)
        {
            deskid=1;
        }
        var webapiip=this.$store.getters.webapiip;
        //向webapi发起一个ajax请求,验证用户名和密码
        this.$ajax({
               method: 'post',
               url:webapiip+'/api/diancan/PostLogin',
               data: {
                  LoginName:username,
                  PassWord:password
               }
         }).then(res=>{

            if(res.data.data.ds.length>0)
            {
                //登录成功
                this.tipmsg="";
                var currentuser=res.data.data.ds[0];
                localStorage.setItem("userid",currentuser.ID);
                localStorage.setItem("TrueName",currentuser.TrueName);
                localStorage.setItem("Tel",currentuser.Tel);
                localStorage.setItem("deskid",deskid);
                this.$router.push({
                      name: 'FoodList',
                      params: {
                        userId: currentuser.ID
                      }
                });
                
            }
            else
            {
                //登录失败
                this.tipmsg="错误:用户名或密码错误";
            }

            console.log(res.data.data.ds[0]);
               
         }).catch(err=>{
                  console.log("错误:"+err);
                  this.tipmsg="错误:"+err;
         });


    }

  }

}
</script>


<style scoped>

.wrapper{
   width:100%;
   height:100%;
}

.main{
  width:100%;
  height:calc(100% - 60px);
  position:fixed;
  top:30px;
  left:0px;
  overflow-y:scroll;
}

.login{
  width:calc(100% - 100px);
  height:200px;
  position:absolute;
  left:50px;
  top:calc(50% - 100px);
}
.main input{
    width:100%;
    height:32px;
    margin-top:5px;
    border:solid 1px #eee;
    border-radius:3px;
    outline:none;
}

.main input.txt{
    width:calc(100% - 5px);
    height:30px;
    margin-top:5px;
    padding-left:3px;
}

.btnlogin{
  background-color:#3CB371;
  color:#fff;
  cursor:pointer;
}

.tipmsg{
  color:red;
}

</style>

 

后续模块陆续更新。

源码   

Logo

前往低代码交流专区

更多推荐