js+express+apidoc书写+ejs-mate 入门(登录页面实现)第二部分

前言

第一部分已经搭建好接口和项目结构

第二部分使用模板+母版实现页面

1 准备

母版准备

1 下载ejs-mate

cnpm i ejs-mate --save-dev

2 配置ejs-mate

app.js

const ejsMate=require("ejs-mate");
const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.set("ejs",ejsMate);

3 在views下创建一个login.ejs

使用X-admin 管理模板
1 官方下载压缩包
2 找到login.html 复制代码到login.ejs
3 将需要的js和css放到public 下 (已经暴露)
4 将需要引入的文件路径多一层(多一个点)

4 说明

1 controller 下的account.js 是编写接口的文件
2 controller 下的admin.js 是渲染页面的

SSR渲染

1 controller下面创建admin.js

class Admin{
    async login(request,response,next){
        response.render("login",{})
    }
    async index(request,response,next){
        response.render("index",{});
    }
}
module.exports=new Admin();

2 配置接口在routers下创建adminRouter.js

const express=require("express");
const router=express.Router();

router.get("/login",require("../controller/admin").login);

module.exports=router;

3 app.js中配置路由

//路由配置
app.use("/api",require("./routes/apiRouter"));
app.use("/admin",require("./routes/adminRouter"));

4 访问

127.0.0.1:3000/admin/login

5 可以看到登录页面

6登录页面和请求

login.ejs

<script>
    $(function  () {
        layui.use('form', function(){
            var form = layui.form;
            //监听提交
            form.on('submit(login)', function(data){
                $.ajax({
                    type:"post",
                    url:"/api/login",
                    data:{
                        name:$('[name="username"]').val(),
                        pwd:$('[name="password"]').val(),
                    }
                }).then(function (res){
                    console.log(res);
                    layer.msg(res.msg,function(){
                       if (res.msg==="登录成功"){
                           location.href='index'
                       }else {
                           layer.msg("请重新输入")
                       }
                    });
                })

                return false;
            });
        });
    })
</script>

总结:

1 完成登录页面的编写
2 jq里面带了 ajax请求
3 使用vue框架+axios