软件设计之JavaWeb(6)
此篇应在MySQL之后进行学习:
路线图推荐：
【Java学习路线-极速版】【Java架构师技术图谱】
尚硅谷全新JavaWeb教程，企业主流javaweb技术栈
资料可以去尚硅谷官网免费领取
此章节最好学完JDBC观看
学习内容：
- node.js
- Vue3
1、node.js
1、
Node.js是一个基于 JavaScript 的服务器端运行环境，它通过 V8 引擎（Google Chrome 的 JavaScript 引擎）将 JavaScript 从浏览器端扩展到了服务器端。这意味着使用 Node.js，你可以用 JavaScript 编写服务器端代码
2、NPM（Node Package Manager）是 Node.js 的默认包管理工具和软件生态系统，专门用于管理 JavaScript 包。
npm安装和配置
1、npm 安装依赖包时默认使用的是
官方源，由于国内网络环境的原因，有时会出现下载速度过慢的情况。为了解决这个问题，可以配置使用阿里镜像来加速 npm 的下载速度，打开命令行终端，执行下方命令，配置使用阿里镜像
2、配置全局依赖下载后存储位置， 在Windows 系统上，npm 的全局依赖默认安装在<用户目录>\AppData\Roaming\npm目录下，可以进行修改
3、查看所有依赖地址：https://www.npmjs.com
换源
npm config set registry https://registry.npmmirror.com
配置依赖存储位置
npm config set prefix "D:\GlobalNodeModules"
npm常用命令
3、Vue3
1、
渐进式框架：Vue 是渐进式的，这意味着你可以只使用它的部分功能，逐步引入更多复杂的功能。你可以从一个简单的网页应用中的 UI 层使用 Vue，逐步扩展到更复杂的应用，而无需一次性导入所有的功能模块。
2、模板语法：Vue 使用基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定到 Vue 实例中的数据。Vue 的模板是完全有效的 HTML，可以与标准的 HTML 结构无缝结合。
3、响应性（Reactivity）是指当应用中的数据发生变化时，Vue 会自动更新视图，使得数据和界面之间始终保持同步。
快速使用(非前端工程化)
使用平台：
VScode
需要下载插件：live server可以在vscode打开html文件(下载完右下角有一个Go Live标志)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 导入vue的依赖，其实就是核心的vue3的js文件 --><script src="./vue.js"></script>
</head>
<body>
<div id = "app"><h1 v-text="message" v-bind:style="colorStyle"> </h1><button>change</button>
</div><script>const app = Vue.createApp({setup(){//定义数据 以变量/对象形式let message = "hello"let colorStyle={"background-color":"yellow"}//在return中返回的变量、方法，才能和html元素关联return{message,colorStyle}}})//将app对象挂载在指定元素上，被挂载的元素内部就可以通过vue框架实现数据的渲染app.mount("#app")</script>
</body>
</html>
Vite前端构建工具
在磁盘的合适位置上,创建一个空目录用于存储多个前端项目
用vscode打开该目录
在vocode中打开命令行运行如下命令
npm create vite@latest
npm run dev
Vite + Vue3目录结构
node_modules：放前端依赖框架
public/：静态资源文件夹，存放不会经过 Vite 处理的资源（如图像、字体等）。其中的文件会直接拷贝到最终构建的输出目录。
src/:项目的主要源代码目录，所有 Vue 组件、JavaScript 文件、样式表等都在此目录中管理。通常包括以下几个子目录：
1、assets/：存放静态资源（如图片、样式文件等），这些资源会通过 import 引入并由 Vite 处理。与 public/ 不同，assets 中的文件可以被 Vite 进行优化、压缩和哈希处理。
2、components/：存放 Vue 组件。所有可复用的组件文件都放在这个文件夹中。
3、App.vue：根组件，Vue 应用的入口组件。通常它是最外层的组件，所有子组件都会在这里引入。
4、main.js：应用的入口文件，用于挂载 Vue 应用到 index.html 中的 DOM 元素（通常是 #app）。在这里你会引入 Vue 的核心包，初始化应用，并将根组件挂载到页面上。
index.html：项目入口 HTML 文件，Vite 的 HTML 是模板文件，不需要复杂的配置，直接作为项目的入口
.gitignore用于指定 Git 版本控制中需要忽略的文件和目录，通常包括 node_modules/、构建产物等不需要提交的文件
vite.config.js:Vite 的配置文件。这个文件是项目的构建配置文件，可以自定义服务器设置、别名、插件等内容。Vite 的默认配置已经足够轻量化，但如果有需要自定义配置的场景，可以在这里进行修改。
SFC单文件组件
SFC（Single File Component，单文件组件）是 Vue.js 中的一种核心概念，它允许开发者将 HTML、JavaScript、CSS 集成在一个 .vue 文件中。这种文件格式简化了组件的开发和维护
SFC 文件通常包含三个部分：
1、template：负责定义组件的 HTML 结构。
2、script：用于定义组件的逻辑和数据。
3、style：用于定义组件的样式。
main.js分析
//从vue框架中导入一个createApp函数
import { createApp } from 'vue'
//导入全局css样式文件，该文件样式会作用到所有的.vue元素上
import './style.css'
//导入了一个App.vue组件，并起了一个别名App
import App from './App.vue'
//使用导入的App组件生成一个对象
let app = createApp(App)
//将app对象挂载到id值为app的元素上
app.mount('#app')
css样式的导入方式
1、在.vue文件中的
style标签中直接写样式代码
2、将css样式保存在独立的css文件中，哪个vue文件需要，就导入在哪里
其中，可以在script标签中导入，也可以在style标签导入
3、如果某个样式要在所有的.vue文件中生效，那么可以在main.js中导入
响应式数据
script setup是 Vue 3 中引入的一种更简洁的编写方式，用于在单文件组件（SFC）中声明组件的逻辑部分
script setup自动将所有在脚本中定义的变量和方法暴露给模板，因此无需显式地返回这些变量，也不需要写 setup() 函数。
响应式数据：在 Vue 中，响应式数据是通过 Vue 的响应式系统追踪的。当这些数据发生变化时，Vue 会自动更新 DOM。常见的响应式数据包括：
1、ref：用于创建一个单值的响应式引用，适合基本类型（如 number, string, boolean）。在script中操作响应式数据，需要添加.value，在template中不需要
2、reactive：用于创建一个响应式的对象或数组，适合复杂的结构体。在script、template操作reactive响应式数据都直接使用对象名.属性名的方式即可
toRefs 和 toRef函数：将多个/一个reactive响应式数据转换为ref
<script setup>
import { ref } from 'vue'let count = ref(0)
function increment() {count.value++
}
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>
<!-- 等效于 -->
<script>
import { ref } from 'vue'export default {setup() {let count = ref(0)function increment() {count.value++}return {count,increment}}
}
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>插值表达式
使用双大括号
{{}}
语法：{{数据名字/函数/对象调用API}}
<script setup type="module">let msg ="hello vue3"let getMsg= ()=>{return 'hello vue3 message'}let age = 19let bee = '蜜 蜂'// 购物车const carts = [{name:'可乐',price:3,number:10},{name:'薯片',price:6,number:8}];//计算购物车总金额function compute(){let count = 0;for(let index in carts){count += carts[index].price*carts[index].number;}return count;}
</script><template><div><h1>{{ msg }}</h1>msg的值为: {{ msg }} <br>getMsg返回的值为:{{ getMsg() }} <br>是否成年: {{ age>=18?'true':'false' }} <br>反转: {{ bee.split(' ').reverse().join('-') }} <br>购物车总金额: {{ compute() }} <br/>购物车总金额: {{carts[0].price*carts[0].number + carts[1].price*carts[1].number}} <br></div>
</template><style scoped></style>
文本渲染（text、html）
v-***这种写法的方式使用的是vue的命令
+v-***的命令必须依赖元素,并且要写在元素的开始标签中(EX：h1,而不是/h1中)- v-***指令支持ES6中的字符串模板
${msg}- 插值表达式中支持javascript的
运算表达式- 插值表达式中也
支持函数的调用v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本
<script setup type="module">let msg ='hello vue3'let getMsg= ()=>{return msg}let age = 19let bee = '蜜 蜂'let redMsg ='<font color=\'red\'>msg</font>'let greenMsg =`<font color=\'green\'>${msg}</font>`
</script><template><div><span v-text='msg'></span> <br><span v-text='redMsg'></span> <br><span v-text='getMsg()'></span> <br><span v-text='age>18?"成年":"未成年"'></span> <br><span v-text='bee.split(" ").reverse().join("-")'></span> <br><span v-html='msg'></span> <br><span v-html='redMsg'></span> <br><span v-html='greenMsg'></span> <br><span v-html="`<font color='green'>${msg}</font>`"></span> <br></div>
</template>
<style scoped>
</style>
属性渲染(bind)
v-bind将数据绑定到元素的属性上
v-bind可以用于渲染任何元素的属性,语法为v-bind:属性名='数据名', 可以简写为:属性名='数据名'
<script setup type="module">const data = {name:'尚硅谷',url:"http://www.atguigu.com",logo:"http://www.atguigu.com/images/index_new/logo.png"}
</script><template><div><a v-bind:href='data.url' target="_self"><img :src="data.logo" :title="data.name"><br><input type="button" :value="`点击访问${data.name}`"></a></div>
</template><style scoped>
</style>
事件绑定(on)
可以使用
v-on来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。
- 用法：
v-on:click="handler"或简写为@click="handler"- vue中的事件名=原生事件名去掉
on前缀 如:onClick --> click- handler的值可以是方法事件处理器,也可以是内联事件处理器
- 绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下
.once：只触发一次事件。[重点].prevent：阻止默认事件。[重点].stop：阻止事件冒泡。- .
capture：使用事件捕获模式而不是冒泡模式。.self：只在事件发送者自身触发时才触发事件。
<script setup type="module">import {ref} from 'vue'// 响应式数据 当发生变化时,会自动更新 dom树let count=ref(0)let addCount= ()=>{count.value++}let incrCount= (event)=>{count.value++// 通过事件对象阻止组件的默认行为event.preventDefault();}
</script>
<template><div><h1>count的值是:{{ count }}</h1><!-- 方法事件处理器 --><button v-on:click="addCount()">addCount</button> <br><!-- 内联事件处理器 --><button @click="count++">incrCount</button> <br><!-- 事件修饰符 once 只绑定事件一次 --><button @click.once="count++">addOnce</button> <br><!-- 事件修饰符 prevent 阻止组件的默认行为 --><a href="http://www.atguigu.com" target="_blank" @click.prevent="count++">prevent</a> <br><!-- 原生js方式阻止组件默认行为 (推荐) --><a href="http://www.atguigu.com" target="_blank" @click="incrCount($event)">prevent</a> <br></div>
</template>
<style scoped>
</style>
条件渲染(if)
v-ifv-if='表达式'只会在指令的表达式返回真值时才被渲染- 也可以使用
v-else为v-if添加一个“else 区块”。- 一个
v-else元素必须跟在一个v-if元素后面，否则它将不会被识别。v-show- 不同之处在于
v-show会在 DOM树中保留该元素；v-show仅切换了该元素上名为display的 CSS 属性为none。v-show不支持在<template>元素上使用，也不能和v-else搭配使用。
列表渲染(for)
v-for指令的值需要使用item in items形式的特殊语法，其中items是源数据的数组，而item是迭代项的别名：- 在
v-for块中可以完整地访问父作用域内的属性和变量。v-for也支持使用可选的第二个参数表示当前项的位置索引。
<script type="module" setup>import {ref,reactive} from 'vue'let parentMessage= ref('产品')let items =reactive([{id:'item1',message:"薯片"},{id:'item2',message:"可乐"}])
</script><template><div><ul><!-- :key不写也可以 --><li v-for='item in items' :key='item.id'>{{ item.message }}</li></ul><ul><!-- index表示索引,从0开始,当然不是非得使用index这个单词 --><li v-for="(item, index) in items" :key="index">{{ parentMessage }} - {{ index }} - {{ item.message }}</li></ul></div>
</template> <style scoped>
</style>
