一、实验目的

  1. 掌握Web前端开发的基础知识;
  2. 掌握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

 

参考文章

http://r5dhx2.axshare.cn/

https://axhub.im/pro/8b03d8bfda86c3de/

Logo

前往低代码交流专区

更多推荐