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