Fortalecer el proceso de producción del proyecto node.js (optimizar las ideas del proyecto)

Caso ---- Gestión de archivos de estudiantes (aplicación de motor de plantillas)

• ~~ Así es, estoy tomando notas de nuevo ~~
• Puntos de conocimiento: respuesta de solicitud http (http), base de datos (módulo de terceros de mangosta), motor de plantillas (módulo de terceros de plantillas de arte), acceso a recursos estáticos (módulo de terceros de servicio estático), el archivo de descripción del proyecto contiene registros.
• Proceso de producción:
  (1) Crear una carpeta de proyecto y generar un archivo de descripción del proyecto
  (2) Crear un servidor de sitio web para lograr la comunicación entre el cliente y el servidor
  (3) Conectarse a la base de datos y diseñar la tabla de información del alumno de acuerdo con las necesidades
  (4) Crear una ruta e implementar la plantilla de página Presentación
  (5) Implementar acceso a recursos estáticos
  (6) Implementar función de adición de información del alumno
  (7) Implementar función de visualización de información del alumno
• Comience con OK
  (1) Cree una carpeta de proyecto y genere un archivo de descripción de proyecto.
  Cree una nueva carpeta de proyecto llamada estudiantes. Abra la herramienta de línea de comando debajo de la carpeta de estudiantes e ingrese (npm init -y) para generar un archivo pack.json (archivo de descripción de proyecto) .
  (2) Cree un servidor de sitio web para lograr la comunicación
  entre el cliente y el servidor.Cree un nuevo archivo app.js en la carpeta de estudiantes (vea las notas para más detalles):

//引入http模板
const http = require('http');
//引入模板引擎模块
const template = require('art-template');
//引入path模块为更好拼接路径
const path = require('path');
//引入静态资源访问模块
const serverStatic = require('serve-static');
//引入日期处理的第三方模块(在模板中默认不能调用方法（通过导入模板变量的方式把方法导入模板）)
const dateformat = require('dateformat');


//实现静态资源访问服务
const serve = serverStatic(path.join(__dirname, 'public'));
//配置模板的根目录
template.defaults.root = path.join(__dirname, 'views');
//处理日期格式的方法
template.defaults.imports.dateformat = dateformat;
//搭建网站服务器
const app = http.createServer();
//连接数据库
require('./model/connect.js');
//接收路由
const router = require('./router/router.js');
//当客户端访问服务器时
app.on('request', (req, res) => {
    //启用router路由,(第三个参数回调函数不可省略)
    router(req, res, () => {});
    //启用静态资源访问功能
    serve(req, res, () => {});
    // res.end('ok');
});



//监听端口
app.listen(3000);
console.log('服务器搭建成功，端口3000');

El código de la base de datos de conexión se encapsula en connect.js en la carpeta del modelo

//安装并引入数据库模块
const mongoose = require('mongoose');
//连接数据库
mongoose.connect('mongodb://localhost/playground', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('数据库连接成功'))
    .catch(err => console.log(err, '数据库连接失败'))

(3) Cree un archivo de enrutamiento para encapsular específicamente el código de enrutamiento (al que se hace referencia cuando se usa)
. Cree una nueva carpeta de enrutador debajo de la carpeta de estudiantes y cree un nuevo archivo enrutador.js:

//引入router模块（路由）
const getRouter = require('router');
//引入模板引擎模块
const template = require('art-template');
//引入querystring模块（post参数接收字符串）
const queryString = require('querystring');



//获取路由对象
const router = getRouter();
//引入学生信息集合的构造函数
const Student = require('../model/user.js');
//搭建路由
//(1)呈递学生档案信息页面
router.get('/add', (req, res) => {
    // res.end('index');
    //响应模板:参数(1)模板名称，(2)插入的数据
    const html = template('index.art', {});
    res.end(html);
});
//(2)呈递学生档案列表页面
router.get('/list', async(req, res) => {
    // res.end('list')
    //从数据库查询数据(find查询所有数据)，并响应给客户端
    // (1)查到的数据存放在student中
    let students = await Student.find();
    // console.log(students);
    //响应模板
    const html = template('list.art', {
        student: students
    });
    res.end(html);
});
//添加学生信息的路由
router.post('/add', (req, res) => {
    //接收post请求参数
    //接收请求参数data，end ，声明变量拼接每次发过来的请求参数
    let formData = '';
    req.on('data', param => {
        formData += param;
    });
    req.on('end', async() => {
        //querystring.parse()可将字符串转换为对象
        // console.log(queryString.parse(formData));
        // res.end('abc');
        //将数据插入数据库
        await Student.create(queryString.parse(formData));
        // 重定向页面
        res.writeHead(301, {
            Location: '/list'
        });
        res.end();
    });

});
//把路由开放出去
module.exports = router;

El código de recopilación de información del alumno se encapsula en user.js en la carpeta del modelo

const mongoose = require('mongoose');
//创建学生集合规则
const studentSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
        minlength: 2,
        maxlength: 10
    },
    age: {
        type: Number,
        min: 10,
        max: 25
    },
    sex: {
        type: String
    },
    email: String,
    hobbies: [String],
    collage: String,
    enterDate: {
        type: Date,
        default: Date.now
    }
});
//使用规则创建集合
const Student = mongoose.model('Student', studentSchema);
//把集合构造函数开放出去
module.exports = Student;

(4) Procesamiento de la página de plantilla
1) La plantilla se escribe en la carpeta de vistas (index.art, list.art) debajo de la carpeta de estudiantes y el sufijo debe cambiarse al formato '.art':
index.art:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>学生档案</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <form action="/add" method="post">
        <fieldset>
            <legend>学生档案</legend>
            <label>
				姓名: <input class="normal" type="text" autofocus placeholder="请输入姓名" name="name">
			</label>
            <label>
				年龄: <input class="normal"  type="text" placeholder="请输入年龄" name="age">
			</label>
            <label>
				性别: 
				<input type="radio" value="0" name="sex"> 男
				<input type="radio" value="1" name="sex"> 女
			</label>
            <label>
				邮箱地址: <input class="normal" type="text" placeholder="请输入邮箱地址" name="email">
			</label>
            <label>
				爱好: 
				<input type="checkbox" value="敲代码" name="hobbies"> 敲代码
				<input type="checkbox" value="打篮球" name="hobbies"> 打篮球
				<input type="checkbox" value="睡觉" name="hobbies"> 睡觉
			</label>
            <label>
				所属学院: 
				<select class="normal" name="collage">
					<option value="前端与移动开发">前端与移动开发</option>
					<option value="PHP">PHP</option>
					<option value="JAVA">JAVA</option>
					<option value="Android">Android</option>
					<option value="IOS">IOS</option>
					<option value="UI设计">UI设计</option>
					<option value="C++">C++</option>
				</select>
			</label>
            <label>
				入学日期: <input type="date" class="normal" name="enterDate">
			</label>
            <label class="btn">
				<input type="submit" value="提交" class="normal">
			</label>
        </fieldset>
    </form>
</body>

</html>

list.art ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学员信息</title>
    <link rel="stylesheet" href="./css/list.css">
</head>

<body>
    <table>
        <caption>学员信息</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>邮箱地址</th>
            <th>爱好</th>
            <th>所属学院</th>
            <th>入学时间</th>
        </tr>
        {{each student}}
        <tr>
            <th>{{$value.name}}</th>
            <th>{{$value.age}}</th>
            <th>{{$value.sex == '0' ? '男' : '女'}}</th>
            <th>{{$value.email}}</th>
            <th>
                {{each $value.hobbies}}
                <span>{{$value}}</span> {{/each}}
            </th>
            <th>{{$value.collage}}</th>
            <th>{{dateformat($value.enterDate,'yyyy-mm-dd')}}</th>
        </tr>
        {{/each}}
    </table>
</body>

</html>

2) Cuando css pertenece a la sección de acceso estático, escríbalo en la carpeta pública debajo de estudiantes y realice el acceso estático a través del módulo de terceros:
main.css:

body {
	margin: 0;
	padding: 0 0 40px;
	background-color: #F7F7F7;
	font-family: '微软雅黑';
}

form {
	max-width: 640px;
	width: 100%;
	margin: 24px auto;
	font-size: 28px;
}

label {
	display: block;
	margin: 10px 10px 15px;
	font-size: 24px;
}

.normal {
	display: block;
	width: 100%;
	height: 40px;
	font-size: 22px;
	margin-top: 10px;
	padding: 6px 10px;
	color: #333;
	border: 1px solid #CCC;
	box-sizing: border-box;
}

.btn {
	margin-top: 30px;
}

.btn input {
	color: #FFF;
	background-color: green;
	border: 0 none;
	outline: none;
	cursor: pointer;
}

input[type="file"] {
	/*opacity: 0;*/
	width: 120px;
	position: absolute;
	right: 0;
	z-index: 9;
}

.import {
	height: 40px;
	position: relative;
}

list.css ：

body {
	padding: 0;
	margin: 0;
}

table {
	border-collapse: collapse;
}

table, td, th {
	text-align: center;
	line-height: 30px;
	border: 1px solid #CCC;
}

caption {
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 10px;
}

table {
	width: 960px;
	margin: 50px auto;
}

a {
	text-decoration: none;
	color: #333;
}

a:hover {
	text-decoration: underline;
	color: #000;
}

Resumen: Si no eres calvo, sigue trabajando duro, ¡sí! ! !