使用github搭建购物网站

  • 时间:
  • 浏览:790
  • 来源:成都艾邦软件开发

1、搭建项目运行的环境

1)在tomcat中配置虚拟主机

在tomcat7/conf/server.xml中的引擎标签下新建一个Host标签

EngineHost namewww.easymall.com appBase创建的文件夹的路径(随便在一个地方创建一个文件夹叫www.easymall.com,交给虚拟主机来管理如果这里不给这个文件夹那么这个虚拟主机也会监控webapps这避免了之后访问这个项目而出现项目启动两次或者跳到别的项目的情况)/Host/Engine

配置完成之后在bin目录中启动一下tomcat(startup)如果启动之后会发现在tomcat7/conf/Catalina文件夹下出现一个www.easymall.com目录说明你的配置生效了。

2)关联easymall把easymall项目配置到虚拟主机中

之前发布项目是把项目的WebRoot文件夹打包发布到webapps(存在于tomcat中)中由于虚拟主机监控webapps所以就相当于把项目部署到了虚拟主机中每次修改项目myeclipse都需要从workspace中找到WebRoot将其改名为项目名称然后重新发布到webapps中。

我们现在用一种新的配置方法
在tomcat7/conf/catalina/www.easymall.com中新建一个ROOT.xml文件在其中只需要写一行代码

Context docBaseD:workspaceEasyMallWebRoot(这是项目文件夹的路径注意不要有中文。为什么不用workspaceEasyMall呢因为它不是一个标准的web应用的文件夹结构)/

这样的话修改项目之后就不用重新发布了。


3作为默认的web应用(配置hosts文件)

在C:Windows/System32/drivers/etc/hosts文件中写127.0.0.1www.easymall.com。这样的话你在浏览器中输入www.easymall.com,就可以访问到本机的tomcat服务器了。

2、将项目的页面导入变成jsp页面

1)直接复制对应文件夹下的css、img目录和对应的.html文件到项目的WebRoot文件夹将index.jsp中除了第一行的内容都删掉将pageEncoding属性改为UTF-8(如果想将新建的jsp页面中的编码默认为UTF-8那么在myeclipse中的Window/Prefrence/搜索JSP/点JSP/将Encoding该为UTF-8就可以了)

2)将index.jsp复制改名。

3)将index.html中的内容全选然后复制最后粘贴到index.jsp中(从第二行开始粘贴)将所有的页面都执行这种操作。

问题我们重新启动tomcat访问www.easymall.com时发现页面无头无尾

这是因为我们没有在index.jsp中引入其他页面的资源。

这个时候我们可以利用请求的包含来解决在body标签下插入% %(jsp的脚本片段允许在jsp中执行java代码)如

%request.getRequestDispatcher(_head.jsp).include(request,response);%

为了将_foot.jsp显示在页面的底部在index.jsp中文件的第一行添加一个buffer属性默认值为8kb我们改为0kb。

% page languagejava importjava.util.* pageEncodingUTF-8 buffer0kb%
%request.getRequestDispatcher(_foot.jsp).include(request,response);%

ps千万注意docBase的B是大写原因不说了说多了都是泪......

项目刚开始忘了写了 前端已经写得差不多了 先放上图赶下进度吧 之后会好好写得


前端页面css布局不用多说
这里主要引用了两个插件 “极验“还有”swiper
这两个插件 .怎么说本身应该并没有坑可能是我太笨了 挖了个不大不小的坑


极验给了两个api一个是表单提交一个是ajax提交
这里给一下极验官网的文档

极验的给的demo目录挺友好比如我用的idea直接将解压缩的文件复制粘贴到项目里就行 弄好了的目录如下

然后我们打开login.jsp
看到了js需要修改的js块 var handler function (captchaObj) {

$(#submit).click(function (e) {var result  captchaObj.getValidate();if (!result) {$(#notice).show();setTimeout(function () {$(#notice).hide();}, 2000);} else {$.ajax({url: gt/ajax-validate2,type: POST,//这个是ajax的提交方式dataType: json,//类型data: {//这里就是ajax要提交的数据 我就在这跌了很傻的一个跟头auto_login: document.getElementById(auto_login).checked,//这是我加的参数用来传入书否记住密码复选框的状态username: $(#username).val(),password: $(#password).val(),geetest_challenge: result.geetest_challenge,geetest_validate: result.geetest_validate,geetest_seccode: result.geetest_seccode},success: function (data) {if (data.status  success) {alert(登录成功);} else if (data.status  fail) {alert(用户名或密码输入错误请重试!);captchaObj.reset();//重置验证按钮 不知道啥作用可以注释试一试}}})}e.preventDefault();});// 将验证码加到id为captcha的元素里同时会有三个input的值用于表单提交captchaObj.appendTo(#captcha2);captchaObj.onReady(function () {$(#wait2).hide();});// 更多接口参考/install/sections/idx-client-sdk.html};$.ajax({url: gt/register2?t  (new Date()).getTime(), // 加随机数防止缓存type: get,dataType: json,success: function (data) {// 调用 initGeetest 初始化参数// 参数1配置参数// 参数2回调回调的第一个参数验证码对象之后可以使用它调用相应的接口initGeetest({gt: data.gt,challenge: data.challenge,new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机offline: !data.success, // 表示用户后台检测极验服务器是否宕机一般不需要关注product: float, // 产品形式包括floatpopupwidth: 100%// 更多配置参数请参见/install/sections/idx-client-sdk.html#config}, handler);}});

至此jsp方面修改完毕
而servlet上需要修改的就是参数也就是geetestConfig中的公钥私钥 注册普惠版在后台就有
StartCaptchaServlet 是验证调用的第一个servlet 不需要修改 这个servlet主要是和极验服务器验证
VerifyLoginServlet 需要修改的就是添加检查用户名密码的方法 在判断result上面添加 比如

if (u_name.equals(1135644844)u_pwd.equals(123456)){gtResult1;}else {gtResult0;}

如上代码就设定了用户名1135644844 密码123456
这里在if里不要使用判断 否则如果第一次验证失败 之后的验证无论如何都是flase
还有用户名密码直接试用request.getParameter(“username”)获取就行
密码和其他传入的数据同理 因为用的是$.ajax()方法提交 所以servlet收到的数据只有data里面传入的 一定记得data里面要传入你需要的数据
至此极验基本部署完毕 同学们可以运行服务器看看啦_
swiper官网API写得很清楚 这里放歌官网就行啦我用的是3
有问题尽管问我就好啦 知无不言言无不尽~