目 录
摘 要 I
Abstract II
目 录 III
第1章 绪论 1
1.1 选题背景及意义 1
1.1.1 选题背景 1
1.1.2 选题意义 1
1.2 国内外研究现状及发展趋势 2
1.2.1 国内研究现状 2
1.2.2 国外研究现状 2
1.2.3 发展趋势 3
1.3课题内容 3
1.4论文结构安排 4
第2章 系统分析 5
2.1系统使用相关技术分析 5
2.1.1Python语言介绍 5
2.1.2Mysql数据库介绍 6
2.1.3Django框架介绍 6
2.2系统可行性分析 7
2.2.1系统技术可行性分析 7
2.2.2系统经济可行性分析 7
2.2.3系统操作可行性分析 8
2.3系统需求分析 8
2.3.1传统销售系统优缺点分析 8
2.3.2本电子购物系统分析 9
2.4系统功能分析 9
2.5系统性能分析 10
2.6用例图 10
2.7系统业务流程 11
第3章 系统设计 15
3.1系统体系结构 15
3.2系统功能结构 15
3.3数据库设计 16
3.3.1ER图设计 16
3.3.2数据库表设计 18
第4章 系统实现 26
4.1系统登录功能的界面实现 26
4.2管理员个人中心功能的界面实现 27
4.3用户注册功能的界面实现 27
4.4用户信息管理功能的界面实现 28
4.5商家商品信息管理功能的界面实现 29
4.6订单管理功能的界面实现 30
4.7管理员商品类型管理功能的界面实现 30
4.8用户在线购买与订单管理功能的界面实现 31
4.9用户在线充值功能的实现界面 33
第5章 系统测试 34
5.1系统测试的方法 34
5.2测试环境与测试条件 34
5.3实例测试表格 34
第6章 总结与展望 36
6.1 总结 36
6.2 展望 36
参考文献 38
致 谢 40
1.3课题内容
本研究主要关注于基于公钥基础设施（PKI）的电子购物系统的设计与实现。该系统结合管理员和用户两类角色，实现了商品的购买、评价、订单管理以及商品和会员信息的维护等功能。
首先，系统通过管理员和用户结合的方式进行商品的购买。用户注册并登录后，可以浏览和查询商品信息，并通过网上支付完成商品的购买。购买成功后，用户可以管理自己的订单信息，并对购买的商品进行评价。
其次，管理员作为系统的重要角色，负责商品和会员信息的管理。管理员可以管理商品的类型，包括添加、编辑和删除商品类型；同时，管理员还可以管理商品信息，包括商品的发布、修改和下架等操作。此外，管理员还需负责订单信息的管理，包括订单的查看、处理和统计等。
为实现上述功能，本研究采用了网络和计算机技术，特别是网页动态技术。通过结合PKI技术，本研究致力于确保系统在数据传输、用户身份验证等方面的安全性。同时，利用Django和Vue.js等现代Web开发框架，构建出功能丰富、界面友好的电子购物系统，以提升用户体验。
综上所述，本研究的主要内容包括：基于PKI技术的电子购物系统设计、用户和管理员功能的实现、商品和订单信息的管理、网页动态技术的应用以及系统的安全性保障等方面。通过这些研究内容的深入探索和实践，旨在推动电子购物系统在安全性、用户体验和功能创新方面的发展。
1.4论文结构安排
本论文的结构安排主要围绕电子购物系统的设计与实现展开，具体分为以下几个部分：
第一章：绪论
在这一章中，将简要介绍电子购物系统的研究背景、目的和意义，阐述当前电子购物系统的发展状况以及存在的安全问题。同时，明确本论文的研究内容、方法和结构安排。
第二章：系统需求分析
在这一章中，将对电子购物系统的需求进行详细分析，包括用户角色划分、功能需求、性能需求、安全需求等方面。通过需求分析，为后续的系统设计提供明确的指导和依据。
第三章：系统设计
在这一章中，将基于需求分析的结果，对电子购物系统进行详细设计。包括系统架构设计、数据库设计、功能模块设计、安全策略设计等方面。通过系统设计，为后续的系统实现提供清晰的蓝图和方案。
第四章：系统实现
在这一章中，将根据系统设计的结果，具体实现电子购物系统的各个功能模块。包括后台管理模块、用户登录注册模块、商品展示模块、购物车模块、订单管理模块、支付模块等。同时，将详细介绍系统实现的具体过程和技术细节。
第五章：系统测试
在这一章中，将对实现的电子购物系统进行全面的测试和评估。包括功能测试、性能测试、安全测试等方面。通过测试和评估，验证系统的稳定性和可靠性，为后续的系统上线和运营提供保障。
第七章：结论与展望
在这一章中，将总结本论文的研究内容和成果，分析电子购物系统的优势和不足，并对未来的研究方向和应用前景进行展望。同时，对论文的研究成果进行归纳和整理，为相关领域的研究和实践提供参考和借鉴。
通过以上七个章节的安排，本论文将全面、系统地研究和实现基于公钥基础设施（PKI）的电子购物系统，为推动电子购物系统在安全性、用户体验和功能创新方面的发展做出贡献。
<!-- 首页 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>首页</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./xznstatic/css/common.css"/>
<link rel="stylesheet" href="./xznstatic/css/style.css"/>
</head>
<style type="text/css">
html, body {
height: 100%;
}
#iframe {
width: 100%;
margin-top: 50px;
padding-top: 64px;
}
#header {
height: auto;
background: #fff;
border-bottom: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
#header .nav-top {
display: flex;
align-items: center;
padding: 0 20px;
font-size: 16px;
color: #2a8a15;
box-sizing: border-box;
height: 50px;
background: #CB945C;
box-shadow: 0 0px 0px rgba(0,0,0,.3);
justify-content: center;
position: relative;
z-index: 1;
}
#header .nav-top-img {
width: 124px;
height: 40px;
padding: 0;
margin: 0;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
box-shadow: 0 0 6px rgba(0,0,0,.3);
}
#header .nav-top-title {
line-height: 40px;
font-size: 20px;
color: rgba(255, 255, 255, 1);
padding: 0 10px;
margin: 0 10px;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
background-color: rgba(0,0,0,0);
box-shadow: 0 0 0px rgba(0,0,0,.3);
}
#header .nav-top-tel {
line-height: 40px;
font-size: 16px;
color: #333;
padding: 0 10px;
margin: 0;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
box-shadow: 0 0 6px rgba(0,0,0,.3);
}
#header .navs {
display: flex;
padding: 0 20px;
align-items: center;
box-sizing: border-box;
height: 64px;
background: #F2F2F2;
box-shadow: 0 1px 6px rgba(0,0,0,0);
justify-content: center;
}
#header .navs1 {
width: 200px;
height: 100vh;
background: darkgoldenrod;
position: absolute;
top: 0;
display: block;
padding: 0;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
#header .navs.navs1::-webkit-scrollbar {
display: none;
}
#header .navs1 .list {
display: flex;
flex-direction: column;
}
#header .navs .title {
width: auto;
line-height: 40px;
font-size: 16px;
color: #333;
padding: 0 10px;
margin: 0 5px;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
background-color: rgba(0,0,0,0);
box-shadow: 0 0 6px rgba(0,0,0,0);
}
#header .navs li {
display: inline-block;
width: auto;
line-height: 34px;
padding: 0 20px;
margin: 0 5px;
color: rgba(0, 0, 0, 1);
font-size: 16px;
border-radius: 10px;
border-width: 10px 0 0;
border-style: solid;
border-color: rgba(143, 143, 143, 1);
background-color: rgba(217, 217, 217, 1);
box-shadow: 0 0 0px rgba(0,0,0,.1);
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
#header .navs li a{
color: inherit;
}
#header .navs li.current a{
color: inherit;
}
#header .navs li a:hover{
color: inherit;
}
#header .navs li.current {
color: rgba(0, 0, 0, 1);
font-size: 16px;
border-radius: 10px;
border-width: 10px 0 0;
border-style: solid;
border-color: rgba(213, 169, 122, 1);
background-color: rgba(223, 195, 153, 1);
box-shadow: 0 0 0px rgba(255,0,0,.8);
}
#header .navs li:hover {
color: rgba(0, 0, 0, 1);
font-size: 16px;
border-radius: 10px;
border-width: 10px 0 0;
border-style: solid;
border-color: rgba(213, 169, 122, 1);
background-color: rgba(223, 195, 153, 1);
box-shadow: 0 0 0px rgba(0,0,0,.3);
}
</style>
<body>
<!-- start 顶部导航栏 -->
<div id="header">
<div v-if='true' class="nav-top">
<img v-if='false' class="nav-top-img" src='http://codegen.caihongy.cn/20220207/32e8fb282bd04ae883c7a780558e97f8.png'>
<div v-if="true" class="nav-top-title">{{projectName}}</div>
<div class="nav-top-tel"></div>
</div>
<div class="navs">
<!-- <div class="logo" style="font-size: 20px;top: 32px;color: #fff;font-weight: bold;margin-left: -200px;width: 240px;" v-text="projectName"></div> -->
<div class="title" v-if="false" v-text="projectName"></div>
<div class="list">
<ul>
<li class='current'><a href="javascript:navPage('./pages/home/home.html')" class="menumain"><i v-if="false" class="layui-icon layui-icon-home"></i>首页</a></li>
<li v-for="(item,index) in indexNav" v-bind:key="index"><a :href="'javascript:navPage(\''+item.url+'\')'" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon" :class="iconArr[index]"></i>{{item.name}}</a></li>
<li><a href="javascript:centerPage();" class="menumain"><i v-if="false" class="layui-icon layui-icon-username"></i>个人中心</a></li>
<li v-if="cartFlag"><a href="javascript:navPage('./pages/shop-cart/list.html')" class="menumain"><i v-if="false" class="layui-icon"></i>购物车</a></li>
</ul>
</div>
</div>
</div>
<!-- end 顶部导航栏 -->
<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" οnlοad="changeFrameHeight"></iframe>
<script src="./xznstatic/js/jquery-1.11.3.min.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/config.js"></script>
<script>
var vue1 = new Vue({el: '#tabbar'})
var vue = new Vue({
el: '#header',
data: {
iconArr: ['layui-icon-gift','layui-icon-email','layui-icon-logout','layui-icon-transfer','layui-icon-slider','layui-icon-print','layui-icon-cols','layui-icon-snowflake','layui-icon-note','layui-icon-flag','layui-icon-theme','layui-icon-website','layui-icon-console','layui-icon-face-surprised','layui-icon-template-1','layui-icon-app','layui-icon-read','layui-icon-component','layui-icon-file-b','layui-icon-unlink','layui-icon-tabs','layui-icon-form','layui-icon-chat'],
indexNav: indexNav,
cartFlag: cartFlag,
adminurl: adminurl,
chatFlag: chatFlag,
projectName: projectName,
},
mounted: function() {
this.bindClickOnLi();
},
created() {
this.iconArr.sort(()=>{
return (0.5-Math.random())
})
},
methods: {
jump(url) {
jump(url)
},
bindClickOnLi() {
let list = document.getElementsByTagName("li");
for(var i = 0;i<list.length;i++){
list[i].onclick = function(){
$(this).addClass("current").siblings().removeClass("current");
localStorage.setItem("checkedLiIndex",$(this).index());
}
}
}
}
});
layui.use(['element','layer'], function() {
var element = layui.element;
var layer = layui.layer;
});
function chatTap(){
var userTable = localStorage.getItem('userTable');
if (userTable) {
layui.layer.open({
type: 2,
title: '客服',
area: ['600px', '600px'],
content: './pages/chat/chat.html'
});
} else {
window.location.href = './pages/login/login.html'
}
}
// 导航栏跳转
function navPage(url) {
localStorage.setItem('iframeUrl', url);
document.getElementById('iframe').src = url;
}
// 跳转到个人中心也
function centerPage() {
var userTable = localStorage.getItem('userTable');
if (userTable) {
localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.html');
document.getElementById('iframe').src = './pages/' + userTable + '/center.html';
} else {
window.location.href = './pages/login/login.html'
}
}
var iframeUrl = localStorage.getItem('iframeUrl');
document.getElementById('iframe').src = iframeUrl || './pages/home/home.html';
let list = document.getElementsByTagName("li");
for(var i = 0;i<list.length;i++){
if(i==localStorage.getItem("checkedLiIndex")) {
$(list[i]).addClass("current").siblings().removeClass("current");
}
}
// var i = 0;
setInterval(function(){
// i++;
// if(i<50) changeFrameHeight();
changeFrameHeight();
},200)
function changeFrameHeight() {
var iframe = document.getElementById('iframe');
// iframe.height = 'auto';
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight;
}
}
};
// 窗口变化时候iframe自适应
// function changeFrameHeight() {
// var header = document.getElementById('header').scrollHeight;
// let isshow = false
// var tabbar = 0
// if(isshow) {
// tabbar = document.getElementById('tabbar').scrollHeight
// }
// var ifm = document.getElementById("iframe");
// ifm.height = document.documentElement.clientHeight - header - tabbar;
// ifm.width = document.documentElement.clientWidth;
// }
// reasize 事件 窗口大小变化后执行的方法
window.onresize = function() {
changeFrameHeight();
}
</script>
</body>
</html>
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
