初始化准备工作
初始化目录
nmp init -y
安装基本的第三方插件
- express
- NPM install express --save
- art-template
- NPM install art-template express-art-template --save
- jQuery
- NPM intsall jQuery --save
- Bootstrap
- NPM install bootstap --save
- body-parser
- NPM install body-parser --save
页面文件
新建 public 文件夹, 将写好的页面资源文件放进去.
测试
- /* 模块 */
- var express = require('express');
- var App = express();
- var path = require('path');
- var template = require('express-art-template');
- /* 组件, 配置 */
- App.use('/public/', express.static(path.join(__dirname, './public')));// 静态资源文件
- /* 服务器 */
- App.listen(8080, () => {
- console.log('8080 okk');
- });
Path 模块相关知识
Path 模块是 Node 中专门用来操作路径字符串的模块, 可以避免手动操作字符串的一些错误, 且跨平台.
一般的路径字符串如:/foo/bar/baz/asdf/quux.html, 可以发现一些共性:
目录名
文件名
扩展名
是否为绝对路径
所以 path 最基本的就是获取这些共性信息.
- path.dirname(pathStr)
- path.dirname('/foo/bar/baz/asdf/quux.html');//--- /foo/bar/baz/asdf
- path.basename(pathStr [,ext])
- path.basename('/foo/bar/baz/asdf/quux.html'); //--- quux.HTML
- path.basename('/foo/bar/baz/asdf/quux'); //--- quux
- path.basename('/foo/bar/baz/asdf/quux.html', '.html'); //--- quux
- path.basename('/foo/bar/baz/asdf/quux.html', '.htm'); //--- quux.HTML
- path.extname(pathStr)
- path.extname('/foo/bar/baz/asdf/quux.html'); //--- .HTML
- path.extname('/foo/bar/baz/asdf/quux'); //---
- path.extname('/foo/bar/baz/asdf/quux.'); //--- .
- path.isAbsolute(pathStr)
- path.isAbsolute('/foo/bar'); // true
- path.isAbsolute('/baz/..'); // true
- path.isAbsolute('qux/'); // false
- path.isAbsolute('.'); // false
此外, path 还提供了一些常用的功能, 比如
将路径字符串转化为路径对象
- path.parse(pathStr)
- path.parse('/foo/bar/baz/asdf/quux.html');
- /*
- { root: '/',
- dir: '/foo/bar/baz/asdf',
- base: 'quux.html',
- ext: '.html',
- name: 'quux' }
- */
将对象转化为路径
- path.format(pathObj)
- path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
- //--- /foo/bar/baz/asdf
路径拼接
path.join([...paths])
Node 中的关于绝对路径的两个参数,__dirname 和__filename.
__dirname 为当前文件模块的绝对路径 (不带文件名).
__fielname 为当前件模块带文件名的绝对路径.
由于相对路径会在文件移动后导致程序出现一些问题, 所以我们在操作路径时尽量使用绝对路径代替相对路径.
art-template 的使用
子模板
子摸版的应用场景是很多网页都有相同的头部和尾部, 那么这部分重复的 HTML 代码我们可以单独写在一个 HTML 文件中, 在需要的地方引入即可, 这个 HTML 就是子文件.
在 art-template 中子模板的语法就是用来实现这个模板文件的引入问题的. 标准语法如下:
- {
- {
- include './header.art'
- }
- }
- {
- {
- include './header.art' data
- }
- }
具体可参考官方文档:
摸版继承
模板继承顾名思义, 很多网页的结构大致相同, 那么我们就可以编写一个父模板 HTML 文件, 让类似结构的文件继承之, 并可编写继承的内容. art-template 中的模板继承语法实现了这种思路.
在父模板中:
{{block 'head'}} ... {{/block}}
可规定继承块.
在自模板中, 先继承, 再修改继承的模板内容
- {
- {
- extend './layout.art'
- }
- }
- {
- {
- block 'head'
- }
- } ... {
- {
- /block
- }
- }
更多内容请参考官方文档:
路由设计
暂时设计一个简单的请求访问的跳转:
- /* 模块 */
- var express = require('express');
- var router = express.Router();
- /* 路由设计 */
- router.get('/',(req,res) => {
- res.render('./index.html');
- });
- router.get('/login',(req,res) => {
- res.render('./login.html');
- });
- router.post('/login',(req,res) => {
- res.render('./login.html');
- });
- router.get('/register',(req,res) => {
- res.render('./register.html');
- });
- router.post('/register',(req,res) => {
- // 读取表单数据
- var data = req.body;
- });
- router.get('/logout',(req,res) => {
- res.render('./register.html');
- });
- module.exports = router;
然后在 App.JS 中使用路由:
- /* 模块 */
- var express = require('express');
- var App = express();
- var path = require('path');
- var template = require('express-art-template');
- var bodyParser = require('body-parser');
- var router = require('./router.js');
- /* 组件, 配置 */
- App.use('/public/', express.static(path.join(__dirname, './public')));// 静态资源文件
- App.use('/node_modules/',express.static(path.join(__dirname,'./node_modules')));// 静态资源文件
- App.engine('html', template);// 配置模板引擎 (设置的目录文件下的 HTML 文件自动渲染)
- App.use(bodyParser.urlencoded({ extended: false }));// parse application/x-www-form-urlencoded
- App.use(bodyParser.JSON());// parse application/JSON
- App.use(router);
- /* 服务器 */
- App.listen(8080, () => {
- console.log('8080 okk');
- });
退出登录逻辑
完善路由设计中的退出登录逻辑.
注册功能
1. 数据库
注册就需要保存用户信息, 这里使用 MongoDB 数据库来保存用户信息. 所以先安装 mongoose:
NPM install mongoose --save
使用新的文件模板来设计用户表: 比如 user.JS
- var mongoose = require('mongoose');
- // 连接数据库
- mongoose.connect('mongodb://localhost/test', {
- useMongoClient: true
- });
- // 设计用户表
- var Schema = mongoose.Schema;
- var userSchema = new Schema({
- email: {
- type: String,
- required: true
- },
- nickname: {
- type: String,
- required: true
- },
- password: {
- type: String,
- required: true
- },
- create_time: {
- type: Date,
- default: Date.now
- },
- last_modify_time: {
- type: Date,
- default: Date,now
- },
- avatar: {
- type: String,
- default: '/public/img/avatar-default.png'
- },
- bio: {
- type: String,
- default: ''
- },
- gender: {
- type: Number,
- enum: [-1, 0, 1],
- default: -1
- },
- brithday: {
- type: Date
- },
- status: {
- type: Number,
- enum: [0, 1, 2],
- default: 0
- }
- });
- module.exports = mongoose.model('User', userSchema);
来源: https://www.cnblogs.com/fzz9/p/10397410.html