《Web项目实践》实验报告——Web项目实践基础
生活随笔
收集整理的這篇文章主要介紹了
《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-inputtype="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
?
參考文章
http://r5dhx2.axshare.cn/
https://axhub.im/pro/8b03d8bfda86c3de/
總結
以上是生活随笔為你收集整理的《Web项目实践》实验报告——Web项目实践基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python——基于PIL和CV2实现自
- 下一篇： LeetCode175 组合两个表