快速入门Web开发（上）
- 本文档是黑马程序员的 黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）_哔哩哔哩_bilibili
- 上这篇没有写什么很深的个人见解 但下篇有
开发Web网站的方式
前后端分离开发
前端开发内容
ajax
什么是ajax
- ajax即 异步JavaScript和XML（异步交互技术（异步通信技术）），可以在不更新所有网页的情况下，更新部分网页。
同步与异步
- 一个网页还没加载出来时，导航栏下面是空白，这个时候点击空白处没有任何反应，这就是同步技术
操作ajax
axios
使用方法一
使用方法2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/axios.js"></script> <script src="js/vue.js"></script> </head> <body> <div id="app"> <button @click="search">查询新闻信息</button> </div> <script> new Vue({ el: "#app", methods: { search() { axios.get("http://localhost:3000/posts") .then(res => {//通过回调函数（参数函数）then来处理请求成功 console.log(res.data); }) } } }); </script> </body> </html>
接口文档
为什么要有接口文档？
- 通过一份相同的东西，比如指定年龄为int型数据，把这个指定成为接口文档。前端和后端分别按照文档来开发
接口文档管理工具YApi
- mock服务指生成数据来供使用
前端工程化
安装nodejs与vue/cli
- nodejs是一个js运行环境
1、验证是否安装成功 node -v （输出版本号则成功） 2、进行相关配置）（以管理员身份运行） npm config set prefix (nodejs安装目录) npm config set prefix "D:\Nodejs" 3、验证配置是否成功 npm config set prefix （输出 NodeJS 则成功） 4、切换npm淘宝镜像来加速(管理员) npm config set registry https://registry.npm.taobao.org 1、 npm install -g @vue/cli 2、验证是否安装成功 vue --version 出现版本号就是成功了
- Vue什么是vue？
- vue使用双向数据绑定，view是视图层，当视图层发生改变时，model层相应数据也发送改变。反之同理
- Vue的基础使用
- 是el 不是e1
- v-model是一个指令，使得数据双向绑定
- 每一个vue实例只能由一个el
-
- 想要控制多个元素，就需要创建多个vue
- 图中el对应的值是id选择器加app1
- 一个元素只能绑定一个vue元素
-
差值表达式
- {{}} 叫做差值表达式
-
-
- 只要名称相同，可以叫任何东西
常见的vue指令
使用v-bind
- 这样a标签所链接的东西就是随着vue对象变化而变化了
- 通过更改v-on后面的click和” “中的内容，可以实现不同的事件触发不同的方法
- 方法要写在methods区域
- 可以使用@来简写
v-show与v-if
- 通过v-if实现，只会出现符合条件的元素
-
- 而通过v-show则将所有元素加载出来，但只显示符合条件的元素
v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="vue.js"></script> <body> <div id="app"> <div v-for="a in arr">{{arr}}</div> </div> </body> <script> new Vue({ el: "#app", data: { arr: ['a', 'b', 'c'] } }) </script> </html>
- 以上代码输出这个，代表了每次遍历都输出一遍arr的内容
- {{}}这个插值对只输出相应内容，而a in arr做到了遍历
- in是必不可少的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="vue.js"></script> <body> <div id="app"> <div v-for="a in arr">{{a}}</div>//改动了这里 </div> </body> <script> new Vue({ el: "#app", data: { arr: ['a', 'b', 'c'] } }) </script> </html>
- 证明a取到了相应内容，而插值对也做出了相应输出
- v-for 的索引默认从零开始
- 插值表达式中可以进行算数运算
注意
- 使用集合存储数据时，记得搞清楚具体的名字
快速入门Web开发（上） 黑马程序员JavaWeb开发教程（2）：https://developer.aliyun.com/article/1548544
