购物网站注册页面html,电商购物网站 - 实现注册
1、项目启动
简单启动
首先,新建一个项目工程目录,然后在目录下创建启动文件app.js。
这里会用到Express框架来实现相关功能,所以,需要先安装它。
在启动文件添加如下内容,来测试Express框架是否引用成功。
let express = require('express');
let app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(80);
浏览器查看结果显示"Hello World!",如收到响应信息则表明我们项目的第一步已经成功搞定。
2、创建目录
项目已经启动成功,下面我们开始创建相关目录,用于存储不同的文件。
public目录:存放静态文件。
routes目录:存放路由文件。
views目录: 存放页面文件。
common目录:存放公共文件。
public目录(可不选),新建javascripts、stylesheets、images三个目录用以存储js、css、img相关文件。
这里我们内置了一些js、css文件来实现简单页面样式和操作,在页面视图中直接使用即可,引用方法如下:
3、添加注册视图页面
添加文件
有了目录,我们开始添加文件,先来添加一个登录页面register.html,便于管理和开发,统一把视图页面放到views目录下。
views目录,添加register.html注册视图页,如下简单效果图:
有了视图页面,我们就可以访问它了,那要如何访问呢,这里就要使用到ejs模板了,安装方法npm install ejs --save,引用如下:
app.set('view engine', 'html');
app.engine('.html', require('ejs').__express);
使用engine函数注册模板引擎并指定处理后缀名为html的文件。
设定视图存放的目录:
app.set('views', require('path').join(__dirname, 'views'));
如果是在本地项目中,我们还要指定本地静态资源访问的路径,如下设置:
app.use(express.static(require('path').join(__dirname, 'public')));
4、访问注册视图页面
访问注册页
有了视图页面,下面我们就开始访问它,app.js文件部分内容,引入相关模块资源,然后简单访问如下:
app.get('/', function (req, res) {
res.render('register');
});
app.listen(80);
启动访问80端口,如成功看到注册页面则表示项目已经运行成功,如未看到,查看相关错误信息,是否缺少相关模块,安装和引用即可。
5、定义user集合Schema
定义Schema
首先在common目录内添加models.js文件用来保存各个集合的Schema文件(集合属性),也便于我们查看和访问,具体内容如下所示:
module.exports = {
user: {
name: {type: String, required: true},
password: {type: String, required: true},
gender: {type: Boolean, default: true}
}
};
有了集合的Schema文件,如何访问呢,接着我们会介绍如何使用Model模型操作这些属性。
6、创建公共方法
还是common目录,我们在新建一个公共方法 —— dbHelper.js文件,来操作这些Schema,因为后面还会涉及此问题,所以我们写成一个公共的方法,dbHelper文件内容如下:
let mongoose = require('mongoose'),
Schema = mongoose.Schema,
models = require('./models');
for (let m in models) {
mongoose.model(m, new Schema(models[m]));
}
module.exports = {
getModel: function (type) {
return _getModel(type);
}
};
let _getModel = function (type) {
return mongoose.model(type);
};
如上所示我们通过getModel可获取集合的Model模型就可以对数据库有实质性的操作了。
关于Model,简单介绍:由Schema构造生成的模型,具有数据库操作的行为。
7、添加注册页单击函数
添加函数
关于dbHelper.js文件里方法的访问很简单,如下所示:
global.dbHelper = require('./common/dbHelper');
这里我们使用global来定义全局变量dbHelper,那么dbHelper就可以在任何模块内调用了。
然后我们就开始修改register视图页面,添加单击事件,例如:
对应register()函数,大致如下:
function register() {
//通过serialize()方法进行序列化表单值,创建文本字符串。
var data = $("form").serialize();
//例如:"username=张三&password=12345"
$.ajax({
url: '/register',
type: 'POST',
data: data,
success: function (data, status) {
if (status == 'success') {
location.href = 'register';
}
},
error: function (res, err) {
location.href = 'register';
}
})
}
8、添加注册页请求路由
添加路由
这里我们需要新建一个文件register.js,专门用来处理来自register页面的post请求, 在后面还会有多个不同处理文件,所以统一管理在routes目录下,在实际开发中我们可能需要针对不同文件请求给出相应文件的处理,所以我们就做分开处理。
这里register.js文件处理get和post请求的相关代码如下:
//app:express对象
module.exports = function (app) {
app.get('/register', function (req, res) {
res.render('register');
});
app.post('/register', function (req, res) {
var User = global.dbHelper.getModel('user'),
uname = req.body.uname;
User.findOne({name: uname}, function (error, doc) {
if (doc) {
req.session.error = '用户名已存在!';
res.send(500);
} else {
User.create({
name: uname,
password: req.body.upwd
}, function (error, doc) {
if (error) {
res.send(500);
} else {
req.session.error = '用户名创建成功!';
res.send(200);
}
})
}
})
})
};
9、模块的加载和引用
register的post请求处理中,我们使用了session(express-session模块)还有处理post请求数据的body属性(body-parser和multer模块),需先安装他们,然后引用即可,如下参考:
//引用模块
var bodyParser = require('body-parser');
var multer = require('multer');
var session = require('express-session');
//调用中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(multer());
后面还会再次添加多个路由记录,所以便于管理和访问,我们可以把他们统一放到一起,比如routes目录下新建index.js文件专门用来存放添加的文件,代码如下:
module.exports = function (app) {
require('./register')(app);
};
那么我们在app.js文件中直接引用index.js文件就可以访问这些文件了,在index.js下写入:
require('./routes')(app);//app:express对象
10、中间件传递信息
这里我们就一步到位,在register的post请求处理中我们使用了express-session模块来保存相关信息,这里我们就使用中间件来传递这些提示信息,中间件内容如下所示:
app.use(function (req, res, next) {
res.locals.user = req.session.user;//保存用户信息
var err = req.session.error;//保存结果响应信息
res.locals.message = '';//保存html标签
if (err) {
res.locals.message = '
'
} else {
next();
}
});
这里注意中间件的安放位置,还有我们设置了变量message并为其简单添加了样式,这里我们在register视图里就用它来作为操作结果的信息提示,直接添加到视图第一个div内即可。
关于注册我们基本已经准备就绪,开始打开连接数据库并设置用户过期时间(注意执行顺序,应放置在首个中间件位置),app.js条件内容如下:
mongoose.Promise=global.Promise;
mongoose.connect("mongodb://127.0.0.1/test");
app.use(session({
secret: 'secret',
cookie: {
maxAge: 1000 * 60 * 30
}
}));
到这里,注册功能已经完毕,在用户注册的信息录入中,我们没有进行相关的为空、两次密码的不匹配等等验证等等(可自行添加),赶紧注册试试吧,本地的话可以通过MongoVUE(可视化客户端)来查看数据是否成功写入数据库。
购物网站注册页面html,电商购物网站 - 实现注册相关推荐
- HTML5期末大作业:电商购物网站设计——易购电商购物网页设计与实现(31页) 含论文+答辩+PPT 计算机毕设网页设计源码 HTML+CSS+JavaScript web课程设计网页规划与设计...
HTML5期末大作业:电商网站设计--易购电商购物网页设计与实现(31页) 含论文+PPT 学生DW网页设计作业成品 HTML+CSS+JavaScript web课程设计网页规划与设计 计算机毕设网 ...
- 直播电商购物消费者满意度在线调查报告(三)
三.直播电商购物消费满意度调查主要结果 为了进一步进行直播电商购物消费满意度调查,并总结出影响消费者满意度(https://www.manyibar.com/news/labels/xiaofeizh ...
- 电商购物网站(登陆注册购物车详情页等)(仿jd)
电商购物网站(仿jd) 源码链接: https://gitee.com/ZRXXUAN/shopping https://github.com/ZRXXUAN/shopping 介绍 仿照jd写的电商 ...
- HTML5期末大作业:商城页面——仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成...
HTML5期末大作业:商城页面--仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末, 你 ...
- HTML5期末大作业:电商购物网站设计——仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 学生电商网页作业...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- HTML5期末大作业网页设计:电商购物网站设计(56页) HTML+CSS+JavaScript 毕业设计、课程设计适用...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- div+css静态网页设计 电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 文章目录 HTML5期末大作业:电商购物网站设计- ...
- HTML5期末大作业:电商购物网站设计——红色的服装商城B2C网站(40页) HTML+CSS+JavaScript 电商购物功能齐全 dw网页设计 大学生商城购物网站
HTML5期末大作业:电商购物网站设计--红色的服装商城B2C网站(40页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常 ...
- 制作网站首页(小兔鲜儿电商购物平台)
目录 项目前置 分析布局 头部模块 底部模块 项目前置 <!DOCTYPE html> <html lang="zh-CN"> <head>&l ...
最新文章
- hexde php_怎样在PHP中把16进制HEX数据转换为2进制数据呢?
- FTP匿名用户的配置
- 八、前端开发-JavaScript 客户端存储
- 复习javascript中call,apply,bind的用法
- 4修改初始值_Java基础篇4——循环
- 区块链中的密码学,使用ABE结合区块链
- [CentOS] 打造vim环境
- linux bc命令全称,Linux bc 命令
- mc用云服务器搭建_最全的云服务器架设我的世界私服教程,不看后悔哦!
- 详解在ASP.NET中用LINQ实现数据处理
- unity案例 mysql lua_通过Xlua实现unity热更新的一个小例子
- java 获取项目下的webapp_Spring Boot2 系列教程(一)纯 Java 搭建 SSM 项目
- 谁在控制着 iCloud 中国区账号的密钥?
- 利用mergeAttributes设置name属性
- Beyond Compare 4常用配置
- [Deprecated!] Android开发案例 - 微博正文
- linux-ubuntu16.04下搭建java运行环境
- 网易有道 ASR 团队斩获 Interspeech 2021 算法竞赛两项冠军
- ChucK学习笔记(零)——前言
- a-tabs defaultActiveKey默认值无效
热门文章
- 【Kafka】kafka 1.0.0 查询订阅某topic的所有consumer group
- Spring Boot : springboot项目混淆方案
- maven编译:target/surefire-reports for the individual test results
- 05-Java通过Executors提供四种线程池
- 企业级iptalbes防火墙
- finalshell远程安装oracle,安装oracle的问题
- java 中的锁 aqs_Java并发编程系列-(4) 显式锁与AQS
- mac mysql 中文_mac 中 mysql 中文乱码问题
- Java线程通信之等待/通知
- Servlet规范之Listener工作原理