《Web项目实践》实验报告——Web项目实践基础
一、实验目的掌握Web前端开发的基础知识;掌握Web前端工程开发的基本流程;二、实验内容1、使用VSCode开发工具完成"青木商城"网站个人中心页面和订单支付确认页面的编写,具体页面布局和内容参考大型电商网站;2、使用git进行代码管理并上传个人中心页面和订单支付确认页面到gitee或GitHub上;3、将青木商城的各页面的超链接关联起来,形成逻辑完整的界面,并将vue.js语法应用于购物车界面;
·
一、实验目的
- 掌握Web前端开发的基础知识;
- 掌握Web前端工程开发的基本流程;
二、实验内容
1、使用VSCode开发工具完成"青木商城"网站个人中心页面和订单支付确认页面的编写,具体页面布局和内容参考大型电商网站;
2、使用git进行代码管理并上传个人中心页面和订单支付确认页面到gitee或GitHub上;
3、将青木商城的各页面的超链接关联起来,形成逻辑完整的界面,并将vue.js语法应用于购物车界面;
4、设计青木商城的数据库表结构;
5、调查问卷WebApp;
6、设计青木商城的后台管理页面原型(使用原型设计工具);
三、实验过程(实验的设计思路、关键源代码等)
1、
<div class="outer9">
<div class="inter1">
<h1>提交订单</h1>
</div>
<div class="inter2">
<div class="inter21">
<div class="inter211">支付方式</div>
<div class="inter212">请先选择收货地址</div>
</div>
<div class="inter22">
<ul>
<li>
<img src="images/s1.png" alt="">
<span class="s1">经典系列红色时钟</span><span class="money">¥</span>
<span class="price">580</span>
<span class="count">1</span>
<span class="money1">¥</span><span class="total">580</span>
<span class="del">删除</span>
</li>
<li>
<img src="images/s2.png" alt="">
<span class="s1">便携简约清扫扫帚</span><span class="money">¥</span>
<span class="price">580</span>
<span class="count">1</span>
<span class="money1">¥</span><span class="total">580</span>
<span class="del">删除</span>
</li>
<li>
<img src="images/s3.png" alt="">
<span class="s1">黑色陶瓷研磨器皿</span> <span class="money">¥</span>
<span class="price">150</span>
<span class="count">1</span>
<span class="money1">¥</span><span class="total">150</span>
<span class="del">删除</span>
</li>
</ul>
</div>
</div>
<div class="inter3">
<div class="inter31">
<label class="sk-checkout-remarks">
<div class="s-title">顾客备注</div>
<input type="text" placeholder="订单补充说明" maxlength="200" class="s-ipt">
</label>
</div>
<div class="inter32">
<div class="sk-checkout-coupon">
<div class="s-title">优惠券</div>
<div class="s-cont">
<span class="s-tips">
<svg aria-hidden="true" class="sk-icon s-tips-icon">
<use xlink:href="#sk-icon-checkout_add"></use>
</svg>
<span>使用优惠券</span>
</span></div>
<div class="sk-coupon-select">
<div class="su-dialog" style="display: none;">
<!---->
</div>
</div>
</div>
</div>
</div>
<div class="inter4">
此单无可用积分(剩余积分: <span class="jifen">150</span>)
</div>
<div class="inter5">
<div class="inter51">
<div class="last">
<a href="青竹登录.html">提交订单</a>
</div>
<div class="foot">
已选<span class="totalCount">3</span>件
合计(不含运费) : <span class="totalPrice">¥1000</span>元<br>
<span class="ss3">已优惠 : <span class="ss4"> ¥0</span></span>
</div>
</div>
</div>
</div>
2、
无
3、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="../js/vue.js"></script>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div id="app">
<table border rules=rows>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in carts" :key="index">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="item.count--" :disabled="item.count <= 0 ">-</button>
{{item.count}}
<button @click="item.count++">+</button>
</td>
<td>
{{item.price*item.count}}
</td>
<td>
<button @click="deleteItem()">删除</button>
</td>
</tr>
</table>
<h3>总价:¥ {{total}}</h3>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
name:'lala',
carts:[{
name:'Vue.js无难事',
price:98,
count:1,
totalPrices:98
},
{
name:'VC++深入详解',
price:168,
count:1,
totalPrices:168
},
{
name:'Servlet/JSP深入详解',
price:139,
count:1,
totalPrices:139
}]
},
methods:{
deleteItem(index){
return this.carts.splice(index,1)
}
},
computed:{
total(){
let ans = 0;
for ( item of this.carts) {
console.log(item)
ans += item.count*item.price
}
return ans
}
}
})
</script>
</html>
4、
CREATE TABLE `产品类型` (
`id` int(11) NOT NULL,
`prouduct` varchar(255) NULL,
`category` varchar(255) NULL,
`url` varchar(255) NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `产品详情` (
`id` int(11) NOT NULL,
`product_name` varchar(255) NULL,
`price` decimal(10,2) NULL,
`stock_count` varchar(255) NULL,
`category` varchar(255) NULL,
`brand` varchar(255) NULL,
`create_time` datetime NULL ON UPDATE CURRENT_TIMESTAMP,
`update_time` datetime NULL ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
);
CREATE TABLE `购物车表` (
`id` int(11) NOT NULL,
`product_id` int(11) NULL,
`product_name` varchar(255) NULL,
`product_num` int NULL,
`uid` int NULL,
`product_price` double NULL,
`create_time` datetime NULL ON UPDATE CURRENT_TIMESTAMP,
`update_time` datetime NULL ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
);
CREATE TABLE `订单表` (
`id` int(11) NOT NULL,
`product_id` int(11) NULL,
`amount` decimal NULL,
`status` tinyint NULL,
`create_time` datetime NULL ON UPDATE CURRENT_TIMESTAMP,
`update_time` datetime NULL ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
);
CREATE TABLE `订单详情表` (
`id` int(11) NOT NULL,
`discount` varchar(255) NULL,
`total_price` decimal(10,2) NULL,
`uid` int(11) NULL,
`create_time` datetime NULL ON UPDATE CURRENT_TIMESTAMP,
`update_time` datetime NULL ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
);
CREATE TABLE `支付记录表` (
`id` int(11) NOT NULL,
`state` varchar(255) NULL,
`way` varchar(255) NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `用户表` (
`id` int(11) NULL,
`uid` int(11) NULL,
`username` varchar(255) NULL,
`password` varchar(255) NULL
);
CREATE TABLE `轮播图商品管理表` (
`id` int(11) NULL,
`src` varchar(255) NULL,
`link` varchar(255) NULL
);
CREATE TABLE `活动栏目表` (
`id` int(11) NOT NULL,
`activity` varchar(255) NULL,
`category` varchar(255) NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `活动商品和栏目管理表` (
`id` int(11) NOT NULL,
`product_id` int(11) NULL,
`activity_id` int(11) NULL,
`price` decimal(10,2) NULL,
`pic_link` varchar(255) NULL,
`pic_url` varchar(255) NULL,
PRIMARY KEY (`id`)
);
ALTER TABLE `活动商品和栏目管理表` ADD CONSTRAINT `fk_活动商品和栏目管理表_产品详情_1` FOREIGN KEY (`product_id`) REFERENCES `产品详情` (`id`);
ALTER TABLE `活动商品和栏目管理表` ADD CONSTRAINT `fk_活动商品和栏目管理表_活动栏目表_1` FOREIGN KEY (`activity_id`) REFERENCES `活动栏目表` (`id`);
5、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>问卷</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
</head>
<body>
<div id="app" >
<div style="margin:25px;outline:#F5F5F5 solid 15px;border: 1px solid black;width:300px;height:400px;padding: 50px" >
<div v-show="index === 0" >
<p>1、请问你的性别是: </p>
<el-radio-group v-model="sex">
<el-radio :label="'男'" >男</el-radio>
<el-radio :label="'女'">女</el-radio>
<el-radio :label="'保密'">保密</el-radio>
</el-radio-group>
<br/>
<br/>
<br/>
<div style="margin-top: 220px">
<el-button type="primary" :disabled="sex === null" @click="index++">下一页</el-button>
<el-button @click="sex=null">重置</el-button>
</div>
</div>
<div v-show="index === 1">
<p>2、请问您的兴趣爱好: </p>
<el-checkbox-group v-model="hobbies">
<el-checkbox :label="'看书'"></el-checkbox><br/>
<el-checkbox :label="'游泳'"></el-checkbox><br/>
<el-checkbox :label="'跑步'"></el-checkbox><br/>
<el-checkbox :label="'看电影'" ></el-checkbox><br/>
<el-checkbox :label="'听音乐'" ></el-checkbox>
</el-checkbox-group>
<br/>
<br/>
<br/>
<div style="margin-top: 130px" >
<el-button type="primary" @click="index--">上一页</el-button>
<el-button type="primary" :disabled="hobbies.length<2 || hobbies.length>3" @click="index++">下一页</el-button>
<el-button @click="hobbies=[]">重置</el-button>
</div>
</div>
<div v-show="index === 2">
<p>3、请介绍一下你自己: </p>
<el-input
type="textarea"
:rows="6"
placeholder="不少于100字"
v-model="introduction">
</el-input>
<br/>
<br/>
<br/>
<div style="margin-top: 100px" >
<el-button type="primary" @click="index--">上一页</el-button>
<el-button type="primary" :disabled="introduction.length<100" @click="submit">提交</el-button>
<el-button @click="introduction=''">重置</el-button>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
index:0,
sex:null,
hobbies:[],
introduction:'',
sytlee:{
width:'200px',
height:'450px',
border:'solid',
paddingTop:'20px',
paddingLeft:'50px',
paddingBottom:'20px',
paddingRight:'50px'
}
},
methods:{
submit(){
alert("提交成功")
}
},
computed:{
}
})
</script>
</html>
6、
无
四、实验结果(实验最终作品截图说明)
1、
2、
3、
4、
5、
6、
五、实验心得
1、掌握Web前端开发的基础知识;
2、掌握Web前端工程开发的基本流程;
3、掌握HTML、CSS、JavaScript
4、掌握Vue.js、Webpack
参考文章
更多推荐
已为社区贡献22条内容
所有评论(0)