Web全栈开发案例教程课件 附课程实验

课程实验《Web全栈开发案例教程》目录/Contents010203HTML和CSS制作页面flex布局和响应式网页实现Node.js和浏览器端JS实验04微信小程序页面和绑定数据实验一王船山简介页面的制作网页中插入文本、图像和列表的标签是哪些？怎样将CSS和HTML代码挂接在一起?本例中哪些地方用到了浮动属性？步骤一：编写HTML代码步骤二：编写CSS代码实验二栏目框的制作Flex布局是怎样实现两端对齐的？文本过长自动省略是怎样用CSS实现的？步骤一：用浮动实现左右两端对齐步骤二：用flex布局实现左右两端对齐实验三响应式网页的制作Flex布局是怎样实现三栏由水平转竖直排列的？Flex是怎样实现一列固定、一列变宽布局的？步骤一：用flex布局实现下图的布局步骤二：添加媒体查询实现响应式布局实验四ES6编程基础实验模板字符串是怎样嵌入变量的？在一个文件中要导出多个函数或变量怎么实现？步骤一：普通字符串转模板字符串步骤二：普通函数转箭头函数步骤三：ES6模块化，导出函数与导入函数letstr=`${name}is${animal}`()=>{}module.exports=app;varexpress=require('express');实验五为栏目框绑定数据模板页的文件后缀名是什么，应放在哪个目录下？查询数据库要使用express中的什么方法？HBuilderX和命令行中分别怎样创建express项目？步骤一：创建express项目步骤二：将静态栏目框页面转成模板页步骤三：查询数据库并绑定数据到栏目框实验六简易新闻系统的制作要执行多个查询为什么要嵌套？首页是怎样向内容页传递参数的？列表页怎样实现分页？步骤一：为多个栏目框绑定数据步骤二：制作内容页步骤三：制作列表页实验七JavaScriptDOM操作与Vue实验怎样修改DOM元素的内容？Vue绑定事件和绑定属性是怎样实现的？步骤一：获取元素并修改内容和属性步骤二：用Vue实现该程序步骤三：使用构建方式创建Vue项目步骤四：将Vue程序写成*.vue文件D:\>npminitvue@latesthello实验八微信小程序页面制作入门bindtap绑定的事件处理函数需要带括号吗？rpx单位和px单位有何区别？页面初始数据需要写在哪个函数的哪个对象中步骤一：新建项目步骤二：添加页面步骤三：设置页头和底部导航步骤四：在index.js中设置页面初始数据步骤五：在index.wxml中绑定数据步骤六：在index.wxml中绑定单击事件，并在index.js编写事件处理函数步骤七：在index.wxss中为页面元素设置字体大小、颜色、背景等属性实验九轮播图和金刚区的制作轮播图是用什么标签实现的？金刚区中图标的排列是横向还是纵向排列的？Flex中的元素允许换行排列要用到什么属性？步骤一：导入实验八完成的项目步骤二：制作轮播图区域<swiper>步骤三：在index.js中设置页面初始数据步骤四：制作金刚区<scroll-view>步骤五：在index.js中添加金刚区元素数据步骤六：在index.wxml中绑定单击事件，并在index.js编写事件处理函数步骤七：在index.wxss中为金刚区元素设置flex、大小、填充等属性实验十wx.request()获取远程数据实验c.js文件可以放在小程序的项目目录中吗？wx.request()中服务器端返回的数据保存在哪？wx.request()函数中能直接使用this吗？步骤一：新建项目步骤二：在public目录下新建c.js文件步骤三：用wx.request()去访问c.js并将返回数据载入到数组中。步骤四：在index.wxml中绑定返回的数据步骤六：用wx.request()去访问输出数据的网址并将返回数据载入到数组中步骤五：在node.js中访问数据库中的news表并输出json数据实验十一微信小程序页面绑定数据怎样循环输出数组中的元素到页面元素中？怎样获取首页传递来的ID值？步骤一：导入8.3节完成的项目步骤二：在node.js项目中访问数据库步骤三：用wx.request()去访问输出数据的网址并将返回数据载入到数组中。步骤四：在index.wxml中绑定返回的数据步骤六：在show.js中获取id值并传递给node.js后端程序步骤五：在单击事件中传递记录的id给show页面wx.request()方法工作流程（1）向指定的url发送HTTP请求，发送请求时可发送参数数据给服务器；（2）服务器成功接收到请求，并返回数据给客户端；（3）客户端接收服务器返回的数据，将其载入到页面元素中，从而在页面上显示服务器返回的数据过程2.网络请求自动售水机①投币③用容器接水用户②出水小程序服务器①发送请求③用数组载入返回的数据②返回响应数据wx.request({url:'URL地址',

method:'GET',

data:{name:'ws'},

success:res=>{ console.log(res)

_self.setData({

hotList:

res.data

});}})wx.request()方法演示服务器返回的数据保存在success函数的res参数中，res是一个对象，其中