简易的express框架的创建和使用

什么是express

express是一个小规模的，基于 node.js 的 web应用程序开发框架，为 web 和移动应用程序提供了强大的功能
express通过使用各种http使用工具和中间件，快速方便的创建强大的api

express 的环境配置

nodeJS的安装

node.js的安装包我们可以去nodeJS官网去下载最新版的稳定版，下载完成后，点击安装，我们可以根据自己的电脑配置情况选择node.js的安装路径。
安装完成后，我们需要进行环境配置，保证我们可以在任何地方运行node命令，配置环境变量时 右键点击 我的电脑 点击属性

进入高级系统设置

选择环境变量，打开path系统变量，然后将我们的node所在目录的路径复制过去

环境配置完成后，打开命令行提示符，输入node -v 如果出现版本号则代表我们安装成功

npm简介

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装

npm的一些简单的命令

npm -v  // 检查npm的版本号

npm install 软件名 -g // -g是-global的间歇，代表全局安装，install 可以简写成 i

npm install -g cnpm --registry=https://registry.npm.taobao.org // 淘宝镜像安装cnpm

创建一个简单地express框架程序

使用npm 全局配置express-generator 环境

cnpm i express-generator -g // 全局安装express-generator

express --version // 安装完成后输入express --version 检测版本号，如果出现版本号代表express 安装成功

使用express 创建自己的第一个项目

express --view=ejs firstproject // 创建一个文件名为firstproject的项目

cd firstproject // 进入到我们创建的项目目录中

cnpm install // 根据项目中的package.json的插件名称和版本安装项目依赖插件

yarn  // 使用yarn 安装依赖

routes 文件夹里面放的主要是路由
public文件是指定的静态资源库，里面的文件可以直接访问到
node_modules 里面放的是我们安装的各种插件
views 里面则是我们写ejs文件，对于ejs 下面会稍微讲述一点基本语法

这是app.js的内容，主要是建立静态资源库，设置view引擎，路由设置，和404操作

这是bin目录下的www文件的主要内容，主要是建立服务，以及监听服务器的运行

ejs文件

EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。
有着快速开发，语法简单，执行迅速，易于调试等优点

ejs 语法

//ejs 主要有三种语法
<%  %>  // 中间存放我们写的js代码
<%=  %> // 会将写入的信息转义后输出
<%-  %> // 不会将写入的信息转义后输出

ejs 代码实例

	<h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <ul id="list-o">
      <% for(var i = 0; i< list.length; i++) { %>
        <li data-id="<%=list[i].id %>"><span class="name"><%=list[i].name%></span> <span class="delMsg">删除</span><span class="edit">编辑</span></li>
      <%}%>
    </ul>

路由进行数据渲染

router.get('/index', function(req, res, next) {
  res.render('index', { 
    title: 'welcome',
    list: data.list
   });
});

页面运行结果

路由 router

前端向后台发送数据请求

			$.post("/userAdd",{
                name:$("#name").val(),
                age:$("#age").val()
            }).then((res) => {
                if(res.status === 0){
                    alert("添加成功")
                    location.href = "./list.html"
                }
            })
            // post 是请求方式 分为post 和get 两种方式 "/userAdd" 是请求的接口名称
            //{name:$("#name").val(),age:$("#age").val()}是我们在请求时需要向后台传递的值，后台接收数据时，根据请求方式的不同进行接收
            //当传递的方式是get时 后台通过 req.query 来接收 方式是post 时，通过res.body来接收
            // .then() 是我们接收到从后台传递过来的数据后进行的操作，通过传递的数据的类型不同，对页面进行操作

后台通过路由接收数据，向数据库进行相应的操作， 本次使用的数据库为mongodb

var student = require("../db/connect")
// 引入db下的connect.js 与mongodb进行连接
const Info = student.model('info', {name: String, age: Number }, "info");
// 创建 数据库添加模板，意见添加数据的字符类型
router.post("/userAdd",(req, res) => {
  var name = req.body.name,
      age = req.body.age
  Info({name,age}).save().then(() => {
    res.json({
      status:0
    })
  })
})
// 后台接收到前端传递的 "/userAdd" 接口，通过req.body 或者 req.query 获取到前端传递的数据
// 然后通过 model 来对数据库进行增、删、改、查等操作。
//mongodb的具体操作我在mongodb的安装文章中有详细解说.
//这里就稍微介绍一部分
info.find() // 查找操作，find()里面可以添加查找的条件
info.remove() // 删除操作 remove() 里面跟删除的条件
info.update() // g更改操作 update() 里面跟更改的条件

// 然后根据我们在进行数据操作后，传过来的数据内容，来向前端发送返回数据。