Vue注册登录实例

自己写的一个登陆注册实例<html><head><meta name="viewport" content="width=device-width" /><title>Index</title><scrip

无盐海

9063人浏览 · 2019-01-17 14:50:20

无盐海 · 2019-01-17 14:50:20 发布

自己写的一个登陆注册实例

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/vue.js"></script>
    <script src="~/Scripts/axios.js"></script>

</head>
<body>
    <div id="userApp">
        <a href="" v-on:click.prevent="comName='login'">登陆</a>
        <a href="" v-on:click.prevent="comName='register'">注册</a>
        <component v-bind:is="comName"></component> <!--comName的值决定这里使用登陆模块还是注册模块-->
        <input type="button" value="获取所有用户数据" v-on:click="getUserList" />
    </div>


    <template id="loginTemp">
        <div>
            <span>用户名：</span><input type="text" v-model="userName" />
            <span>密码：</span><input type="password" v-model="password" />
            <input type="button" value="登陆" @@click="login(userName,password)" />
        </div>
    </template>

    <template id="registerTemp">
        <div>
            <div><span>用户名：</span><input type="text" v-model="userName" /></div>
            <div><span>密码：</span><input type="password" v-model="password" /></div>
            <div><span>昵称：</span><input type="text" v-model="nickName" /></div>
            <div><span>邮箱：</span><input type="email" v-model="email" /></div>
            <div><span>公司：</span><input type="text" v-model="sysID" /></div>
            <div><span>电话：</span><input type="tel" v-model="mobile" /></div>
            <input type="button" value="注册" @@click="register(userName,password,nickName,email,sysID,mobile)" />
        </div>
    </template>


    <script>
        var $ajax = axios.create({
            baseURL: 'http://localhost:59130/api/'
        });
        $ajax.defaults.headers.common['Authorization'] = "";

        function isLogin() {
            if ($ajax.defaults.headers.common['Authorization'] == "" || $ajax.defaults.headers.common['Authorization'] == null) {
                alert("亲，您好像还没登陆哦！")
                return;
            }
        }

        Vue.component("login", {
            template: "#loginTemp",
            data: function () {
                return {
                    userName: '',
                    password: ''
                }
            },
            methods: {
                login: function (name, pwd) {
                    $ajax.post('/Login/Login', {
                        UserLoginID: name, Password: pwd
                    }).then(function (res) {
                        $ajax.defaults.headers.common['Authorization'] = res.data.token; //登陆成功后将服务端返回的token放到请求报文头headers中 key为Authorization 值为token保存
                    }).catch(function (error) { console.log(error); });
                }
            }
        });
        Vue.component("register", {
            template: "#registerTemp",
            data: function () {
                return {
                    userName: '',
                    password: '',
                    nickName: '',
                    email: '',
                    sysID: 1,
                    mobile: '',
                }
            },
            methods: {
                register: function (userName, pwd, nickName, email, sysID, mobile) {
                    $ajax.post('/Login/UserRegister', {
                        UserLoginID: userName, Password: pwd, CUserName: nickName, Email: email, SysID: sysID, Mobile: mobile
                    }).then(function (res) {
                        alert(res.data.msg);
                    }).catch(function (error) { console.log(error); });
                }
            }
        });
        var vm = new Vue({
            el: "#userApp",
            data: {
                comName: 'login'
            },
            methods: {
                getAllList: function () {
                    isLogin();
                    $ajax.post('/User/GetUserList', { //如果登陆成功后，这个请求会在请求报文头中将Authorization携带过去
                    }).then(function (response) {
                        console.log(response);
                    }).catch(function (error) { console.log(error); });
                }
            }
        })
    </script>
</body>
</html>

服务端：Login控制器

namespace FBA.WebApi.Controllers
{
    //[EnableCors(origins: "http://localhost:44299", headers: "*", methods: "*")]
    [SkipCheckLogin]
    [ApiCorsPolicy]
    [RoutePrefix("api/login")]
    public class LoginController : ApiController
    {
        //[Route("api/login/login")]
        [Route("login")]
        public IHttpActionResult UserLogin(UserInforSession model)
        {
            if (string.IsNullOrEmpty(model.UserLoginID) || string.IsNullOrEmpty(model.Password))
            {
                return Json(new { code = -1, msg = "用户名,或者密码不能为空" });
            }
            UserLogin login = new UserLogin();
            List<UserInforSession> users = login.Login(model.UserLoginID, Md5Helper.Encrypt(model.Password));
            if (users != null && users.Count > 0)
            {
                var token = JWTHelper.Encrypt(new JwtPayLoadModel { UserName = model.UserLoginID, UserId = Convert.ToInt32((users[0].ID)) });
                return Json(new { code = 0, msg = "登陆成功", token });
            }
            return Json(new { code = -2, msg = "用户名或密码错误" });
        }


        [Route("UserRegister")]
        public IHttpActionResult UserRegister(UserInforSession model)
        {
            model.Password = Md5Helper.Encrypt(model.Password);
            if (string.IsNullOrEmpty(model.UserLoginID) || string.IsNullOrEmpty(model.Password))
            {
                return Json(new { code = -1, msg = "用户名,或者密码不能为空" });
            }
            UserLogin login = new UserLogin();
            var isOk = login.RegisterUser(model);
            if (isOk == 1)
            {
                return Json(new { code = 0, msg = "注册成功" });
            }
            return Json(new { code = -2, msg = "注册失败" });
        }
    }
}

服务端User控制器

namespace FBA.WebApi.Controllers
{
   
    [ApiCorsPolicy]
    [RoutePrefix("api/User")]
    public class UserController : ApiController
    {
        [Route("GetUserList")]
        [HttpPost]
        public IHttpActionResult GetUserList()
        {
            var token = Request.Headers.GetValues("Authorization").FirstOrDefault();
            var userinfo = JWTHelper.Decrypt(token);

            //var userdt = SqlHelper.ExecuteDataTable("select top 10 * from Sys_UserInfo");
            return Json("");
        }
    }
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^