电商购物网站 - 实现注册

news/2024/4/29 15:51:05/文章来源:https://blog.csdn.net/weixin_33696822/article/details/89038873

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、创建目录

项目已经启动成功,下面我们开始创建相关目录,用于存储不同的文件。

  1. public目录:存放静态文件。

  2. routes目录:存放路由文件。

  3. views目录: 存放页面文件。

  4. common目录:存放公共文件。

  5. public目录(可不选),新建javascriptsstylesheetsimages三个目录用以存储jscssimg相关文件。

这里我们内置了一些jscss文件来实现简单页面样式和操作,在页面视图中直接使用即可,引用方法如下:

<link href="example/css/bootstrap.min.css" rel="stylesheet" >    <script src="example/js/jquery.min.js" type="text/javascript"></script> <script src="example/js/bootstrap.min.js" type="text/javascript"></script>

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视图页面,添加单击事件,例如:

<input type="button" onclick="register()" value="注 册">

对应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文件处理getpost请求的相关代码如下:

//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、模块的加载和引用

registerpost请求处理中,我们使用了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、中间件传递信息

这里我们就一步到位,在registerpost请求处理中我们使用了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 = '<div class="alert alert-danger" style="margin-bottom: 20px;color: red;">' + err + '</div>'} else {next();}
});

这里注意中间件的安放位置,还有我们设置了变量message并为其简单添加了样式,这里我们在register视图里就用它来作为操作结果的信息提示,直接添加<%- message %>到视图第一个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(可视化客户端)来查看数据是否成功写入数据库。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_753989.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python databaseoperate_Python实现识别手写数字 简易图片存储管理系统

写在前面上一篇文章Python实现识别手写数字—图像的处理中我们讲了图片的处理&#xff0c;将图片经过剪裁&#xff0c;拉伸等操作以后将每一个图片变成了1x10000大小的向量。但是如果只是这样的话&#xff0c;我们每一次运行的时候都需要将他们计算一遍&#xff0c;当图片特别多…

公众号h5获取手机号权限_开发 | H5、公众号、小程序、网站、App,有什么区别?...

很多做传统行业、实体生意的老板们&#xff0c;来咨询知道君&#xff0c;想通过互联网来实现营销&#xff0c;但是又被复杂的互联网体系弄得焦头烂额&#xff0c;不知道该如何进行选择。的确&#xff0c;对于外行人来说&#xff0c;H5、公众号、小程序、App、官网……互联网的花…

服务器怎么打开系统文件,centos7系统如何打开文件_网站服务器运行维护

centos系统apache不解析php_网站服务器运行维护centos系统apache不解析php的解决方法是&#xff1a;1、安装依赖包httpd-devel&#xff1b;2、在编译php时添加apxs路径参数&#xff1b;3、修改apache配置文件&#xff0c;并重启服务。一、cat [-n] file [|more]其中&#xff0c…

java登录信息怎么保存_java网站开发怎么实现用户账号信息本地保存

展开全部看看这个吧&#xff01;主要是对cookie的操作package cn.itcast.util;import java.io.IOException;import java.io.PrintWriter;import java.io.UnsupportedEncodingException;import javax.servlet.FilterChain;import javax.servlet.ServletException;import javax.s…

win10开机Chrome自启全屏展示特定网站

一、准备Chrome 1. 下载 官方下载地址&#xff1a; https://www.google.cn/chrome/ 2. 安装 安装完成后桌面会出现一个Chrome的快捷方式&#xff0c;如下图&#xff1a; 3. 设置全屏展示特定网站 这里用 ”微软中国“ 网站为例演示&#xff0c;网址为&#xff1a; https…

在 IIS8 中保持网站持续运行

在早期版本的 IIS 中执行轮询任务不那么可靠。应用程序池回收后&#xff0c;网站不会自动重启&#xff0c;在新的请求激活应用程序之前&#xff0c;轮询任务不起作用。为了解决这个问题&#xff0c;需要引入外力驱动 Web 端执行任务&#xff0c;如图&#xff1a; 此方式比较繁琐…

关于 Web 安全,99% 的网站都忽略了这些

Web安全是一个如何强调都不为过的事情&#xff0c;我们发现国内的众多网站都没有实现全站https&#xff0c;对于其他安全策略的实践更是很少&#xff0c;本文的目的并非讨论安全和攻击的细节&#xff0c;而是从策略的角度引发对安全的思考和重视。 1. 数据通道安全 http协议下的…

适合程序员学习的网站

github 这是一个全球性的面向开源社区和私有软件的托管平台&#xff0c;它提供关于程序员的综合资讯&#xff0c;软件更新资讯&#xff0c;每周软件推荐&#xff0c; 码云最新推荐&#xff0c;网页开发&#xff0c;app&#xff0c;h5营销众包。技术问答和各种各样小众领域的博客…

证书过期?私钥泄露?掌控您的证书和私钥,维护网站安全和声誉!

2019独角兽企业重金招聘Python工程师标准>>> 数字证书&#xff0c;作为网络世界的身份证&#xff0c;提供了一种在Internet上验证通信实体身份的方式&#xff0c;其作用类似于司机的驾驶执照或日常生活中的身份证。譬如&#xff0c;Web Server通过提供自己的数字证书…

win8网站发布——IIS安装及配置

一&#xff1a;代码打包发布 由于这里其他人的博客里写的很清楚了&#xff0c;就不多说了&#xff0c;详见 这里网站发布—图解Win7旗舰版中的IIS配置asp.net运行环境&#xff08;一&#xff09;网站发布—图解Win7旗舰版中的IIS配置asp.net运行环境&#xff08;二&#xff09…

python爬取指定多个网页数据_Python爬取网站,前几个有数据,之后返回None?

想获取廖雪峰python教程网站的内容练练手&#xff0c;发现有的章节能返回数据&#xff0c;但到Python基础这一章开始返回的都是None&#xff0c;没明白问题出在哪&#xff0c;求教错误如下&#xff1a; Traceback (most recent call last): File "scraping_the_tutorial.p…

VS发布网站后的文件夹为空

我们做.NET的项目最常用的就是VS,当我们编码完成之后&#xff0c;需要本地发布&#xff0c;测试成功之后&#xff0c;在发布到服务器上。这里我们介绍一下如何在本地发布。 一、配置 发布之前要在电脑上配置IIS,这个在之前的博客中提到过&#xff0c;不再重复&#xff0c;连接为…