初次体验ASP.NET

初次体验ASP.NET

Scroll Down

开学了,虽然不能回学校,但是还是逃不掉要上课的命运,这学期培养方案里面有要求ASP.NET,既然课程培养方案里面有ASP.NET,那也没办法了,只好硬着头皮学了(T▽T)。

昨天刚接触ASP.NET,感觉这东西,哎,不是那么喜欢它的语法。

而且学了那么久的SSM框架和SpringBoot都用不上了,伤心(╥╯^╰╥),后来为了简化开发,又去学了Vue,前几天刚差不多看完。
想着既然SSM和SpringBoot用不上了,那Vue总用的上吧,毕竟ASP.NET是后端的嘛,一个前端框架总不能不能用吧。PS(其实是不太想用jQury操作dom元素)(。>∀<。)

查了一些关于怎么在ASP.NET中使用Vue的资料,例子等等。通过一些文档教程,自己也写了一个demo,模拟登录功能

1.先安装Vue和axios




安装即可

2.在Models文件夹下新建User类和returnJson类

User用于模拟数据库表User映射对象

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication1.Models
{
    public class User
    {
        public string username { get; set; }
        public string password { get; set; }
    }
}

returnJson用于返回封装JSON数据的对象

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication1.Models
{
    public class returnJson
    {
        public Object data { get; set; }
        public int status { get; set; }
    }
}

3.在Controller文件夹下新建一个控制器LoginController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class LoginController : Controller
    {
        // GET: Login
        public ActionResult Login()
        {
            return View();
        }

        [HttpGet]
        public JsonResult checkLogin(User user)
        {
            returnJson json = new returnJson();
            //模拟账号密码
            if ("admin".Equals(user.username) && "123456".Equals(user.password))
            {
                User u = new User();
                u.username = "admin";
                u.password = "123456";
                json.data = u;
                json.status = 200;
                return Json(json, JsonRequestBehavior.AllowGet);
            } 
            else
            {
                json.data = null;
                json.status = 400;
                return Json(json, JsonRequestBehavior.AllowGet);
            }
        }
    }
}

4.在Login.cshtml中加入以下代码

我这用的是element-ui,没有用自带的bootstrap,样式就不贴出来了


@{
    ViewBag.Title = "登录";
    //清除模板页
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/style.css")
    @Styles.Render("~/Content/ElementUI/element-ui.css")
    @Scripts.Render("~/Scripts/axios.js")
    @Scripts.Render("~/Scripts/vue.min.js")
    @Scripts.Render("~/Scripts/ElementUI/element-ui.js")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div id="app">
        <div class="login-form">
            <div>
                <img class="login-icon" src="https://www.lwjppz.cn/avatar" />
            </div>
            <el-form class="login-input" :model="loginForm">
                <el-form-item>
                    <el-input v-model="loginForm.username" placeholder="用户名"><i slot="prefix" class="el-icon-user"></i></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="loginForm.password" placeholder="密码" type="password"><i slot="prefix" class="el-icon-lock"></i></el-input>
                </el-form-item>
                <el-row class="login-btn">
                    <el-button type="primary" v-on:click="login">登录</el-button>
                    <el-button type="info">重置</el-button>
                </el-row>
            </el-form>
        </div>
    </div>
</body>
</html>
<script>
    const app = new Vue({
    el: '#app',
    data: {
        loginForm: {
            username: 'admin',
            password: '123456'
        }
    },
    methods: {
        login() {
            axios.get('Login/checkLogin', {
                params: {
                    username: this.loginForm.username,
                    password: this.loginForm.password
                }
            }).then(res => {
                if (res.data.status === 200) {
                    this.$message.success('登录成功!')
                } else {
                    this.$message.error('登录失败!')
                }
            }).catch(err => {
               this.$message.error('登录失败!')
               console.log(err)
            })
        }
    }
})
</script>

5.修改RouteConfig默认配置

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace WebApplication1
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
		//改为跳转到登录页面
                defaults: new { controller = "Login", action = "Login", id = UrlParameter.Optional }
            );
        }
    }
}

按ctrl+F5启动

最终结果如下

登录成功

登录失败

支付宝 微信