项目创建大致流程

项目大致创建流程

  • 初始化 npm init --yes
  • 改后台启动首页 index.app 改为app.js
  • 改启动命令
    首先导入 nodemon
    npm i nodemon --save-dev
    或者yarn add nodemon --dev
    然后在package.json scripts的text下面里面加上下面两条语句

“start”: “node app.js”,
“dev”: “nodemon --watch ./”
最后看package.json里面有没有下面的语句

  "devDependencies": {
    "nodemon": "^2.0.4"
  }

证明导入成功,可以在node中输入npm run dev 来启动项目

下面开始的该导包的导包

常用包导入命令

yarn add express art-template express-art-template mysql express-async-errors body-parser echarts express-session multer
node-xlsx svg-captcha cookie-parser

mysql -------------- 数据库
express-async-errors--------------------全局错误包
body-parser ------------------------post包
echarts-------------------图形图表包
express-session --------------- 保存用户信息包
multer ------------------ 中间件用于上传文件的包
node-xlsx ----------------保存样式xlsx表格包
svg-captcha ------------------- 验证码包
cookie-parser--------------cookie包

创建常用文件夹

  • config 文件公共的变量资源
  • excelDir 创建导出的excel文件
  • imgUploads 上传下载的图片的文件
  • model 常用模板文件
  • public 公开的静态文件夹
  • routes 路由文件夹
  • services 中间服务文件夹
  • test 调试代码文件夹
  • utils 数据库相关的文件夹
  • views 视图文件夹
  • app.js 主文件
const express = require("express");
require('express-async-errors');   //导入全局错误包
const http = require("http");
const app = express();
const server = http.createServer(app);
const template = require("express-art-template");
const DBUtil = require("./utils/DBUtil"); //导入数据库
const path = require("path");
const PageJson = require("./model/PageJson"); //转换定义的json格式

//配置express的post请求
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false, limit: "30mb" }));
app.use(bodyParser.json({ limit: "30mb" }));

//配置cookie
const cookieParser = require("cookie-parser");
app.use(cookieParser("abcasdfaerabcasdfaer123t43a3q32q"));//越长难度越大

//3条定义文件是以template模板渲染的 ,格式是html
app.set("views", path.join(__dirname, "./views"));
app.engine("html", template);
app.set("view engine", "html");     

//开放静态文件
app.use("/public", express.static(path.join(__dirname, "./public")));
app.use("/imgUploads",express.static(path.join(__dirname,"./imgUploads")));           //开放静态的图片下载的文件

//保存用户信息
app.use(session({
    secret: "abcdzjb123",   //session加密字符串
    resave: true,           //是否可以重新保存,
    saveUninitialized: false//是否每次保存的时候,重新初始化
}));

const appConfig = require("./config/appConfig");//工厂模式的文件

//在路由加载之前,静态文件加载之后开始拦截,拦截器需写在加载路由之前
app.use((req, resp, next) => {
    if (req.session.adminInfo) {
        //说明你有session,直接放行
        next();
    }
    else {
        //说明没有admininfo的session没有登陆,此处代码是基于工厂模式文件中的开放路由
        if (appConfig.excludePath.includes(req.path)) {
            next();
        }
        else {
            resp.send("")
        }
    }
})

//路由封装遍历出来的每个路由
require("./utils/loadRouter")(app);
//此处代码基于下面这段
/*const fs = require("fs");
const path = require("path");
const loadRouter = app => {
    let ps = fs.readdirSync(path.join(__dirname, "../routes"));
    for (let item of ps) {
        var router = require(path.join(__dirname, "../routes", item));
        var routerPath = item.replace("Router.js", "");
        routerPath = routerPath[0].toLowerCase() + routerPath.substr(1);
        app.use(`/${routerPath}`, router);
    }
}
module.exports = loadRouter;*/

//处理404,一定要放在所有加载路由的后面 
app.use(function (req, resp, next) {
    resp.render("status/404");
});

//服务器报错以后500
app.use((error, req, resp, next) => {
    if (req.xhr) {
        resp.json({ status: "fail", msg: "服务器错误" });
    }
    else {
        console.log(error);
        //只有报错才会进这里
        resp.render("status/500");
    }
});
//跟上面代码差不多
//全局异常处理
/*app.use((error, req, resp, next) => {
    if (req.xhr) {
        resp.json(new PageJson(false, "服务器错误"));
    }
    console.log(error);
    resp.status(500).send("服务器错误------" + error.message);
});*/

server.listen(81, "0.0.0.0", () => {
    console.log("服务器启动成功");
});

此流程适用于前后端不分离的小项目,觉得可以的点个赞给个关注,后期会持续更新心得

你可能感兴趣的:(javascript,前端,vue.js)