Node.js小项目-学生档案管理

Author： jinxiaoliang
发布时间：April 10, 2020
1522views
No comments
4768 words
Categories： Node

1.建立项目文件夹并生成项目描述文件
输入下面命令生成package.json文件

npm init -y

2.创建网站服务器实现客户端和服务器端通信
创建app.js文件
在app.js中输入以下代码完成客户端和服务器端通信

//引入http模块
const http = require('http');
//创建网站服务器
const app = http.createServer();

//当客户端访问服务器的时候
app.on('request',(req,res) => {
    res.end('ok!');
});

app.listen(80);
console.log('启动成功');

3.连接数据库并根据需求设计学院信息表
(1)连接数据库需要用到第三方模块mongoose,用下面命令下载

npm install mongoose

(2)创建学生集合规则并且运用结合规则

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);

4.创建路由并实现页面模板呈递
(1)第三方模块router(功能：实现路由)

使用步骤：
* 获取路由对象
* 调用路由下面的方法创建路由
* 启用路由，使路由生效

//引入http模块
const http = require('http');
//引入router第三方模块
const getRouter = require('router');
//获取路由对象
const router = getRouter();

//呈递学生档案信息页面
router.get('/test',(req,res) => {
    res.end('test');
});

//呈递学生档案信息列表页面
router.get('/index',(req,res) => {
    res.end('index');
});


//学生信息集合
const Student = require('./module/user');
//数据库连接
require('./module/connect');
//创建网站服务器
const app = http.createServer();


//当客户端访问服务器的时候
app.on('request',(req,res) => {
    router(req, res, () => {});
});

app.listen(80);
console.log('启动成功');

5.实现静态资源访问
(1)下载模板引擎art-template

npm install art-template

(2)在student目录下创建views文件夹,并且放入模板文件
(3)在student目录下创建public文件夹，并且放入静态资源
(4)在app.js中引入模板引擎和path模块并且进行模板配置

//引入模板引擎
const template = require('art-template');
//引入path模块
const path = require('path');

//配置模板根目录
template.defaults.root = path.join(__dirname,'views');
//设置模板默认后缀
template.defaults.extname = '.html';

(4)第三方模块serve-static(功能：实现静态资源访问服务)

使用步骤
    * 引入serve-static模块获取创建静态资源服务功能的方法
    * 调用方法创建静态资源服务并指定静态资源服务目录
    * 启用静态资源服务功能

//引入serve-static模块
const serveStatic = require('serve-static');
//实现静态资源访问服务
const serve = serveStatic(path.join(__dirname,'public'));
//启用静态资源访问功能
serve(req, res, () => {});

6.实现学生信息的添加功能
(1)在模板的表单中指定请求地址和请求方式,为每一个表单项添加name属性

<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="0" name="hobbies"> 敲代码
                <input type="checkbox" value="1" name="hobbies"> 打篮球
                <input type="checkbox" value="1" 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>

(2)添加实现学生信息功能路由,接收客户端传递过来的学生信息,将学生信息添加到数据库中
将页面重定向到学生信息列表页面

//实现学生信息添加功能路由
router.post('/add',(req,res) => {
    //接收post请求参数
    let formDate = '';
    req.on('date',param => {
        formDate += param;
    });
    req.on('end', async () => {
        await Student.create(queryString.parse(formDate));
        res.writeHead(301, {
            Location: '/list';
        });
        res.end();
    });
});

7.实现学生信息的展示功能
(1)从数据库中将所有的学生信息查询出来

//呈递学生档案信息列表页面
router.get('/list',async (req,res) => {
    //查询学生信息
    let student = await Student.find();
    let html = template('list',{
        student: student
    });
    res.end(html);
});

(2)通过模板引擎将学生信息和HTML模板进行拼接

{{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}}

(3)将拼接好的HTML模板响应给客户端

//查询学生信息
    let student = await Student.find();
    let html = template('list',{
        student: student
    });
    res.end(html);

源代码连接：https://github.com/jinxiaoliang/Node.js-Student

Last modification：April 10th, 2020 at 02:22 am

如果觉得我的文章对你有用，请随意赞赏

Node.js小项目-学生档案管理

jinxiaoliang • 2020 年 04 月 10 日

1.建立项目文件夹并生成项目描述文件
输入下面命令生成package.json文件

npm init -y

2.创建网站服务器实现客户端和服务器端通信
创建app.js文件
在app.js中输入以下代码完成客户端和服务器端通信

//引入http模块
const http = require('http');
//创建网站服务器
const app = http.createServer();

//当客户端访问服务器的时候
app.on('request',(req,res) => {
    res.end('ok!');
});

app.listen(80);
console.log('启动成功');

3.连接数据库并根据需求设计学院信息表
(1)连接数据库需要用到第三方模块mongoose,用下面命令下载

npm install mongoose

(2)创建学生集合规则并且运用结合规则

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);

4.创建路由并实现页面模板呈递
(1)第三方模块router(功能：实现路由)

使用步骤：
* 获取路由对象
* 调用路由下面的方法创建路由
* 启用路由，使路由生效

//引入http模块
const http = require('http');
//引入router第三方模块
const getRouter = require('router');
//获取路由对象
const router = getRouter();

//呈递学生档案信息页面
router.get('/test',(req,res) => {
    res.end('test');
});

//呈递学生档案信息列表页面
router.get('/index',(req,res) => {
    res.end('index');
});


//学生信息集合
const Student = require('./module/user');
//数据库连接
require('./module/connect');
//创建网站服务器
const app = http.createServer();


//当客户端访问服务器的时候
app.on('request',(req,res) => {
    router(req, res, () => {});
});

app.listen(80);
console.log('启动成功');

5.实现静态资源访问
(1)下载模板引擎art-template

npm install art-template

//引入模板引擎
const template = require('art-template');
//引入path模块
const path = require('path');

//配置模板根目录
template.defaults.root = path.join(__dirname,'views');
//设置模板默认后缀
template.defaults.extname = '.html';

(4)第三方模块serve-static(功能：实现静态资源访问服务)

使用步骤
    * 引入serve-static模块获取创建静态资源服务功能的方法
    * 调用方法创建静态资源服务并指定静态资源服务目录
    * 启用静态资源服务功能

//引入serve-static模块
const serveStatic = require('serve-static');
//实现静态资源访问服务
const serve = serveStatic(path.join(__dirname,'public'));
//启用静态资源访问功能
serve(req, res, () => {});

6.实现学生信息的添加功能
(1)在模板的表单中指定请求地址和请求方式,为每一个表单项添加name属性

<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="0" name="hobbies"> 敲代码
                <input type="checkbox" value="1" name="hobbies"> 打篮球
                <input type="checkbox" value="1" 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>

(2)添加实现学生信息功能路由,接收客户端传递过来的学生信息,将学生信息添加到数据库中
将页面重定向到学生信息列表页面

//实现学生信息添加功能路由
router.post('/add',(req,res) => {
    //接收post请求参数
    let formDate = '';
    req.on('date',param => {
        formDate += param;
    });
    req.on('end', async () => {
        await Student.create(queryString.parse(formDate));
        res.writeHead(301, {
            Location: '/list';
        });
        res.end();
    });
});

7.实现学生信息的展示功能
(1)从数据库中将所有的学生信息查询出来

//呈递学生档案信息列表页面
router.get('/list',async (req,res) => {
    //查询学生信息
    let student = await Student.find();
    let html = template('list',{
        student: student
    });
    res.end(html);
});

(2)通过模板引擎将学生信息和HTML模板进行拼接

{{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}}

(3)将拼接好的HTML模板响应给客户端

//查询学生信息
    let student = await Student.find();
    let html = template('list',{
        student: student
    });
    res.end(html);

源代码连接：https://github.com/jinxiaoliang/Node.js-Student

Node.js小项目-学生档案管理

Leave a Comment Cancel reply

【vscode1.60.0】解决terminal.integrated.shell.windows不支持改变命令行窗口的问题

vue跨域问题-the response must not be the wildcard '*' when the request's credentials mode is 'include'

正则表达式

window.sessionStorage和window.localStorage

JavaScript-立即执行函数

冒泡排序

质素求和

函数

JavaScript-寻找最长单词

Node.js模块化开发

Node.js小项目-学生档案管理