项目创建大致流程

桃扇骨 2022-12-10 03:50 209阅读 0赞

## 项目大致创建流程 ##

*  初始化 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("<script>alert('你还没有登陆，请先登录');top.location.href='/main/login';</script>")
            }
        }
    })
    
    //路由封装遍历出来的每个路由
    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("服务器启动成功");
    });

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

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue创建项目的基本流程

.安装node.js环境可以去官网下载安装包:[https://nodejs.org/][https_nodejs.org] 安装好后,可以输入node -v ...

浅浅的花香味﹌/ 2024年04月17日 23:33/ 0 赞/ 65 阅读

相关 SpringMVC项目的创建流程

> [Java知识点总结：想看的可以从这里进入][Java] 目录 1、搭建项目流程 1.1、介绍 1.2、创建项

末蓝、/ 2024年03月26日 17:50/ 0 赞/ 70 阅读

相关 Vue脚手架创建项目流程

Vue脚手架创建项目流程图形化创建在创建文件的文件夹打开cmd， > 按住shift右键打开黑窗口，或者直接在文件夹上面路径上面输入cmd 输入`vue u

今天药忘吃喽~/ 2022年12月15日 02:28/ 0 赞/ 201 阅读

相关项目创建大致流程

项目大致创建流程初始化 npm init --yes 改后台启动首页 index.app 改为app.js 改启动命令首先导入 node

桃扇骨/ 2022年12月10日 03:50/ 0 赞/ 210 阅读

相关 HBase中region split的大致流程

经过和社区讨论，并参照网上的一些帖子，自己还看了一些源码，终于将region split的大致流程搞清楚了。 1. RegionServer开始split，首先会在ZK中创建

左手的ㄟ右手/ 2022年08月11日 07:29/ 0 赞/ 152 阅读

相关创建express项目的流程

1，安装node 2，使用express框架 npm install express -g 3, npm install express-generator -g (e

港控/mmm°/ 2022年06月01日 07:56/ 0 赞/ 267 阅读

相关 Retrofit2源码大致流程

> 注意：这篇文章不是一篇系统的文章，如果查看完整系统文章可以参考文末的相关文章。 > 这篇文章只对自己觉得重要的地方进行了分析。使用方法：[官方使用教程][Link

末蓝、/ 2022年05月30日 01:49/ 0 赞/ 204 阅读

相关 Django 创建项目流程

django 项目创建流程 1 创建项目 cmd django-admin startproject 项目名称 p

比眉伴天荒/ 2022年01月12日 11:19/ 0 赞/ 322 阅读

相关 vue+第三方+后台个推实现配置大致流程

1.![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

Dear 丶/ 2021年09月21日 08:48/ 0 赞/ 261 阅读

相关记录一次项目中代码大致优化方向

简单来说就是优化后台文件下载的，主要因为文件类型多，有的文件需要动态写入值（报表），有的不需要，有的能下载有的只能在线打开，可采用策略+工厂方法优化一下代码结构： ![2

女爷i/ 2021年07月21日 02:53/ 0 赞/ 455 阅读