正版 Web前端开发实训案例教程(高级) 北京新奥时代科技有限责

章概述1

1.1实践目标1

1.2实践知识地图2

1.3实施安排13

1.3.1实验（技术专题）部分13

1.3.2综合实践部分31

第2章开发工具（HBuilderX工具）36

2.1实验目标36

2.2实验任务36

2.3设计思路36

2.4实验实施37

2.4.1步骤一：下载并安装HBuilderX37

2.4.2步骤二：HBuilderX主界面38

2.4.3步骤三：创建项目39

2.4.4步骤四：编辑html文件39

2.4.5步骤五：运行40

第3章ES6（网页计算器）42

3.1实验目标42

3.2实验任务43

3.3设计思路44

3.4实验实施（跟我做）45

3.4.1步骤一：创建项目和文件45

3.4.2步骤二：制作HTML页面45

3.4.3步骤三：制作CSS样式46

3.4.4步骤四：编写网页计算器类47

3.4.5步骤五：编写乘除运算逻辑47

3.4.6步骤六：编写加减运算逻辑48

3.4.7步骤七：编写数据返回方法48

3.4.8步骤八：页面交互逻辑48

3.4.9步骤九：运行效果49

第4章Node.js（个Node.js程序）52

4.1实验目标52

4.2实验任务53

4.3设计思路53

4.4实验实施54

4.4.1步骤一：Node.js的下载与安装54

4.4.2步骤二：HBuilderX的下载与安装57

4.4.3步骤三：Node.js目录结构57

4.4.4步骤四：创建项目和文件58

4.4.5步骤五：使用NPM包管理工具58

4.4.6步骤六：创建服务器58

4.4.7步骤七：运行效果59

第5章Node.js（Web便签）60

5.1实验目标60

5.2实验任务61

5.3设计思路61

5.4实验实施（跟我做）62

5.4.1步骤一：创建项目和文件62

5.4.2步骤二：完成页面显示63

5.4.3步骤三：完成资源判断64

5.4.4步骤四：实现前后端交互66

5.4.5步骤五：完成文件写入67

5.4.6步骤六：完成文件读取67

5.4.7步骤七：获取便签列表68

5.4.8步骤八：运行效果68

第6章Node.js（文学网）70

6.1实验目标70

6.2实验任务70

6.3设计思路72

6.4实验实施（跟我做）73

6.4.1步骤一：创建项目和文件73

6.4.2步骤二：准备数据74

6.4.3步骤三：实现文学网页面74

6.4.4步骤四：实现请求处理78

6.4.5步骤五：实现用户登录79

6.4.6步骤六：实现退出登录功能81

6.4.7步骤七：实现读者页面功能81

6.4.8步骤八：实现作者发布文章功能85

6.4.9步骤九：实现读者接收文章内容86

6.4.10步骤十：运行效果89

第7章Node.js（简历网）91

7.1实验目标91

7.2实验任务92

7.3设计思路93

7.4实验实施（跟我做）95

7.4.1步骤一：安装Express应用程序生成器95

7.4.2步骤二：使用应用程序生成器创建项目95

7.4.3步骤三：Express目录结构95

7.4.4步骤四：构建前端页面96

7.4.5步骤五：安装和连接MySQL数据库98

7.4.6步骤六：开发中间件99

7.4.7步骤七：实现路由跳转99

7.4.8步骤八：运行效果101

第8章JSONP（商品清单）103

8.1实验目标103

8.2实验任务103

8.3设计思路104

8.4实验实施（跟我做）105

8.4.1步骤一：创建项目和文件105

8.4.2步骤二：创建前端页面106

8.4.3步骤三：创建HTTP服务器107

8.4.4步骤四：发送跨域请求107

8.4.5步骤五：后台请求处理108

8.4.6步骤六：数据写入页面108

8.4.7步骤七：运行效果108

第9章RESTfulAPI（在线答题器）110

9.1实验目标110

9.2实验任务111

9.3设计思路111

9.4实验实施（跟我做）112

9.4.1步骤一：创建项目和文件112

9.4.2步骤二：设计完成前端页面113

9.4.3步骤三：实现答题功能115

9.4.4步骤四：前端功能实现116

9.4.5步骤五：运行效果117

0章Vue.js（个Vue.js程序）118

10.1实验目标118

10.2实验任务119

10.3设计思路120

10.4实验实施（跟我做）120

10.4.1步骤一：HBuilderX的下载和安装120

10.4.2步骤二：Node.js的下载和安装121

10.4.3步骤三：安装webpack121

10.4.4步骤四：安装VueCLI脚手架121

10.4.5步骤五：创建工程122

10.4.6步骤六：启动项目123

1章Vue.js（文章管理）125

11.1实验目标125

11.2实验任务127

11.3设计思路128

11.4实验实施（跟我做）131

11.4.1步骤一：创建项目和文件131

11.4.2步骤二：配置路由规则132

11.4.3步骤三：安装和引入Axios133

11.4.4步骤四：配置跨域请求代理133

11.4.5步骤五：准备文章列表数据133

11.4.6步骤六：编写文章管理页面134

11.4.7步骤七：编写文章添加页面135

11.4.8步骤八：准备移动端文章列表数据137

11.4.9步骤九：编写移动端文章列表页面138

11.4.10步骤十：Node.js接口139

11.4.11步骤十一：请求后台接口141

11.4.12步骤十二：运行效果142

2章Vue.js（网页聊天室）144

12.1实验目标144

12.2实验任务145

12.3设计思路145

12.4实验实施（跟我做）147

12.4.1步骤一：创建项目和文件147

12.4.2步骤二：配置路由规则148

12.4.3步骤三：编写用户登录页面149

12.4.4步骤四：登录信息验证150

12.4.5步骤五：准备聊天室数据150

12.4.6步骤六：编写聊天室页面151

12.4.7步骤七：聊天页面初始化设置152

12.4.8步骤八：编写对话框组件152

12.4.9步骤九：父子组件的传值154

12.4.10步骤十：运行效果155

3章Vue.js（美食网）156

13.1实验目标156

13.2实验任务157

13.3设计思路158

13.4实验实施（跟我做）160

13.4.1步骤一：创建项目和文件160

13.4.2步骤二：配置路由规则161

13.4.3步骤三：Vuex的Store配置161

13.4.4步骤四：创建页头组件162

13.4.5步骤五：创建页脚组件163

13.4.6步骤六：注册页头和页脚全局组件164

13.4.7步骤七：准备菜品列表数据164

13.4.8步骤八：创建美食网首页164

13.4.9步骤九：创建购物车页面167

4章HTML和CSS代码结构优化（小说网首页）171

14.1实验目标171

14.2实验任务172

14.3设计思路172

14.4实验实施（跟我做）174

14.4.1步骤一：创建项目和文件174

14.4.2步骤二：构建HTML页面174

14.4.3步骤三：使用CSS样式美化页面177

14.4.4步骤四：使用jQuery实现动态透明效果180

5章图片资源优化（雪碧图）181

15.1实验目标181

15.2实验任务181

15.3设计思路182

15.4实验实施（跟我做）182

15.4.1步骤一：创建项目和文件182

15.4.2步骤二：制作HTML页面183

15.4.3步骤三：制作雪碧图183

15.4.4步骤四：实现缩小和压缩184

15.4.5步骤五：制作CSS样式184

15.4.6步骤六：运行效果185

6章前端资源加载优化（在线相册）186

16.1实验目标186

16.2实验任务186

16.3设计思路187

16.4实验实施（跟我做）188

16.4.1步骤一：创建项目和文件188

16.4.2步骤二：设计完成前端页面，实现预加载189

16.4.3步骤三：前端发送获取图片请求189

16.4.4步骤四：后台处理请求，返回响应信息190

16.4.5步骤五：运行效果190

7章webpack（打包项目―文章管理）191

17.1实验目标191

17.2实验任务192

17.3设计思路192

17.4实验实施（跟我做）192

17.4.1步骤一：使用NPM下载并安装webpack和webpack-cli192

17.4.2步骤二：webpack配置文件的配置参数192

17.4.3步骤三：打包文章管理项目194

17.4.4步骤四：部署到Express195

17.4.5步骤五：运行效果195

8章CSS32D和3D（手机相册）197

18.1实验目标197

18.2实验任务197

18.3设计思路199

18.4实验实施（跟我做）199

18.4.1步骤一：创建项目和文件199

18.4.2步骤二：创建移动端的HTML页面200

18.4.3步骤三：使用flex弹性布局美化页面200

18.4.4步骤四：制作Y轴的旋转效果201

18.4.5步骤五：制作点击放大效果201

18.4.6步骤六：运行效果202

9章Canvas（手机账单）203

19.1实验目标203

19.2实验任务204

19.3设计思路204

19.4实验实施（跟我做）205

19.4.1步骤一：创建项目和文件205

19.4.2步骤二：制作HTML页面205

19.4.3步骤三：制作数据205

19.4.4步骤四：制作表格206

19.4.5步骤五：制作坐标207

19.4.6步骤六：填充数据207

19.4.7步骤七：运行效果208

第20章SVG（SVG绘制图标）209

20.1实验目标209

20.2实验任务210

20.3设计思路210

20.4实验实施（跟我做）211

20.4.1步骤一：创建项目和文件211

20.4.2步骤二：SVG图片文件的结构211

20.4.3步骤三：绘制SVG图片212

20.4.4步骤四：应用SVG图片212

20.4.5步骤五：运行效果213

第21章Less（菜单）214

21.1实验目标214

21.2实验任务214

21.3设计思路215

21.4实验实施（跟我做）216

21.4.1步骤一：创建项目和文件216

21.4.2步骤二：Less的安装217

21.4.3步骤三：绘制HTML页面217

21.4.4步骤四：编写Less，美化页面218

21.4.5步骤五：Less编译220

21.4.6步骤六：运行效果221

第22章jQueryMobile（手机通讯录）223

22.1实验目标223

22.2实验任务224

22.3设计思路224

22.4实验实施（跟我做）225

22.4.1步骤一：下载和引入225

22.4.2步骤二：准备数据226

22.4.3步骤三：下载和引入jQueryMobile资源文件226

22.4.4步骤四：jQueryMobile页面结构227

22.4.5步骤五：创建联系人列表页面227

22.4.6步骤六：创建拨号页面230

22.4.7步骤七：运行效果231

第23章综合实践（Web聊天室）233

23.1项目简介233

23.2实践目标233

23.3需求分析234

23.4静态页面设计236

23.4.1工作任务236

23.4.2设计思路239

23.4.3实现（跟我做）242

23.5数据库设计和创建268

23.5.1工作任务268

23.5.2设计思路268

23.5.3实现（跟我做）270

23.6后端接口设计274

23.6.1工作任务274

23.6.2设计思路274

23.6.3实现（跟我做）274

23.7阶段Node.js：创建工程276

23.7.1工作任务276

23.7.2设计思路277

23.7.3实现（跟我做）277

23.8阶段Node.js：欢迎界面284

23.8.1工作任务284

23.8.2设计思路285

23.8.3实现（跟我做）286

23.9第二阶段Express：创建Express工程289

23.9.1工作任务289

23.9.2设计思路289

23.9.3实现（跟我做）290

23.10第二阶段Express：管理员登录294

23.10.1工作任务294

23.10.2设计思路295

23.10.3实现（跟我做）297

23.11第二阶段Express：显示用户列表302

23.11.1工作任务302

23.11.2设计思路303

23.11.3实现（跟我做）305

23.12第二阶段Express：获取用户信息310

23.12.1工作任务310

23.12.2设计思路310

23.12.3实现（跟我做）311

23.13第二阶段Express：修改用户信息314

23.13.1工作任务314

23.13.2设计思路315

23.13.3实现（跟我做）316

23.14第二阶段Express：用户登录323

23.14.1工作任务323

23.14.2设计思路323

23.14.3实现（跟我做）324

23.15第二阶段Express：显示聊天列表326

23.15.1工作任务326

23.15.2设计思路327

23.15.3实现（跟我做）328

23.16第二阶段Express：获取聊天信息334

23.16.1工作任务334

23.16.2设计思路335

23.16.3实现（跟我做）336

23.17第二阶段Express：保存聊天信息341

23.17.1工作任务341

23.17.2设计思路342

23.17.3实现（跟我做）343

23.18第二阶段Express：消息统计348

23.18.1工作任务348

23.18.2设计思路348

23.18.3实现（跟我做）349

23.19第三阶段Vue.js：创建Vue工程352

23.19.1工作任务352

23.19.2设计思路353

23.19.3实现（跟我做）353

23.20第三阶段Vue.js：管理员登录359

23.20.1工作任务359

23.20.2设计思路360

23.20.3实现（跟我做）362

23.21第三阶段Vue.js：用户列表370

23.21.1工作任务370

23.21.2设计思路371

23.21.3实现（跟我做）373

23.22第三阶段Vue.js：用户修改382

23.22.1工作任务382

23.22.2设计思路383

23.22.3实现（跟我做）384

23.23第三阶段Vue.js：用户登录392

23.23.1工作任务392

23.23.2设计思路394

23.23.3实现（跟我做）394

23.24第三阶段Vue.js：聊天列表398

23.24.1工作任务398

23.24.2设计思路398

23.24.3实现（跟我做）399

23.25第三阶段Vue.js：消息401

23.25.1工作任务401

23.25.2设计思路402

23.25.3实现（跟我做）403

23.26第四阶段移动端开发（jQuery Mobile）：用户登录409

23.26.1工作任务409

23.26.2设计思路409

23.26.3实现（跟我做）411

23.27第四阶段移动端开发（jQuery Mobile）：聊天列表415

23.27.1工作任务415

23.27.2设计思路416

23.27.3实现（跟我做）417

23.28第四阶段移动端开发（jQuery Mobile）：消息421

23.28.1工作任务421

23.28.2设计思路422

23.28.3实现（跟我做）423

23.29第四阶段移动端开发（jQuery Mobile）：消息统计428

23.29.1工作任务428

23.29.2设计思路429

23.29.3实现（跟我做）430

23.30第五阶段性能优化：图片资源优化433

23.30.1工作任务433

23.30.2设计思路433

23.30.3实现（跟我做）434

23.31第五阶段性能优化：前端资源加载优化436

23.31.1工作任务436

23.31.2设计思路43

23.31.3实现（跟我做）437

23.32第五阶段性能优化：项目打包438

23.32.1工作任务438

23.32.2设计思路439

23.32.3实现（跟我做）439

北京新奥时代科技有限责任公司于2006年04月12日在石景山分局登记成立。公司经营范围包括技术开发、技术推广、技术转让、技术咨询、技术服务等。 原著者简介

本书是按照《Web前端开发职业技能等级标准》（不错）编写的配套实践教材，教材中所有应用技术专题和项目代码均在主流浏览器中运行通过。本书结合大学计算机相关专业的Web前端开发方向课程体系、企业Web前端开发岗位能力模型和《Web前端开发职业技能等级标准》，形成Web前端开发三位一体知识地图，以实践能力为导向，以企业真实应用为目标，遵循企业软件工程标准和技术，以任务为驱动，对HBuilderX工具、HTML5、CSS3、JavaScript、jQuery、MySQL、AJAX、RESTfulAPI、Node.js、Express、Vue.js、jQueryMobile、Less、Canvas、SVG、ES6、webpack、性能优化等Web前端开发中的重要知识单元，结合实际案例和应用环境进行了分析和设计，并对每一个重要的知识单元进行了详细介绍，力求使读者真正掌握这些知识，从而在实际场景中加以应用。全书分为两部分：部分为实验，采用技术专题进行知识单元训练，可以对应课程练习，针对不同的知识单元设计了实验项目，重点训练每一个知识单元内容；第二部分为综合实践，可以对应课程设计，用“Web聊天室”项目贯穿Web前端开发核心知识，系统训练核心知识在企业真实项目中的应用。本书适合作为《Web前端开发职业技能等级标准》（不错）的实践教学参考用书，也适合作为对Web前端开发感兴趣的读者的指导用书。