Nuxt.js详解(二)
目录
6. ajax操作
6.1 整合 axios
6.1.1 默认整合
- 在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合
6.1.2 手动整合（可选）
步骤1：package.json有axios的版本
<span style="background-color:#f8f8f8"> <span style="color:#aa1111">"dependencies"</span>: {
<span style="color:#aa1111">"@nuxtjs/axios"</span>: <span style="color:#aa1111">"^5.13.1"</span>,
},</span>步骤2：安装
<span style="background-color:#f8f8f8">npm install</span>步骤3：nuxt.config.js 以模块的方式添加axios
<span style="background-color:#f8f8f8"> <span style="color:#000000">modules</span>: [
<span style="color:#aa5500">// https://go.nuxtjs.dev/axios</span>
<span style="color:#aa1111">'@nuxtjs/axios'</span>,
],</span>6.1.3 常见配置
修改 nuxt.config.js 进行baseURL的配置
<span style="background-color:#f8f8f8"> <span style="color:#aa5500">// Axios module configuration: https://go.nuxtjs.dev/config-axios</span>
<span style="color:#000000">axios</span>: {
<span style="color:#000000">baseURL</span>:<span style="color:#aa1111">'http://localhost:10010/'</span>
},</span>6.2 使用axios发送ajax
在vue页面中，通过 this.axios.xxx() 操作ajax。this.axios 与之前 axios等效。
<span style="background-color:#f8f8f8"><span style="color:#770088">this</span>.<span style="color:#000000">$axios</span>.<span style="color:#000000">post</span>(<span style="color:#aa1111">"/search-service/search"</span>,<span style="color:#770088">this</span>.<span style="color:#000000">searchMap</span>).<span style="color:#000000">then</span>( <span style="color:#0000ff">res</span> <span style="color:#981a1a">=></span> {
<span style="color:#aa5500">//获得查询结果</span>
<span style="color:#770088">this</span>.<span style="color:#000000">searchResult</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">res</span>.<span style="color:#000000">data</span>.<span style="color:#000000">data</span>;
});</span>6.3 使用asyncData发送 ajax
- asyncData中的ajax将在“前端服务端执行”，在浏览器看到是数据，而不是ajax程序。
6.3.1 发送一次请求
- 语法：
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">export</span> <span style="color:#770088">default</span> {
<span style="color:#000000">async</span> <span style="color:#000000">asyncData</span>( <span style="color:#0000ff">context</span> ) { <span style="color:#aa5500">//context就相当于其他地方的this</span>
<span style="color:#aa5500">//发送ajax</span>
<span style="color:#770088">let</span> { <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#0055aa">context</span>.<span style="color:#000000">$axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'路径'</span>,<span style="color:#aa1111">'参数'</span>)
<span style="color:#aa5500">// 返回结果</span>
<span style="color:#770088">return</span> {<span style="color:#000000">变量</span>: <span style="color:#000000">查询结果从data获取</span> }
},
}</span></span>实例
<span style="background-color:#f8f8f8"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#555555">{{echo}}</span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
<span style="color:#000000">async</span> <span style="color:#000000">asyncData</span>(<span style="color:#0000ff">context</span>) {
<span style="color:#aa5500">// 发送ajax</span>
<span style="color:#770088">let</span> {<span style="color:#0000ff">data</span>} <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#0055aa">context</span>.<span style="color:#000000">$axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/feign/echo/abc'</span>)
<span style="color:#aa5500">// 返回数据</span>
<span style="color:#770088">return</span> {
<span style="color:#000000">echo</span>: <span style="color:#0055aa">data</span>
}
},
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
</span>6.3.2 发送多次请求
语法1：
<span style="background-color:#f8f8f8"><span style="color:#770088">export</span> <span style="color:#770088">default</span> {
<span style="color:#000000">async</span> <span style="color:#000000">asyncData</span>( <span style="color:#0000ff">content</span> ) {
<span style="color:#770088">let</span> [<span style="color:#0000ff">结果1</span>,<span style="color:#0000ff">结果2</span>] <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">Promise</span>.<span style="color:#000000">all</span>([ <span style="color:#000000">ajax请求1</span>, <span style="color:#000000">ajax请求2</span>])
<span style="color:#770088">return</span> {
<span style="color:#000000">变量1</span>: <span style="color:#0055aa">结果1</span>,
<span style="color:#000000">变量2</span>: <span style="color:#0055aa">结果2</span>
}
},
}</span>语法2：
<span style="background-color:#f8f8f8"><span style="color:#770088">export</span> <span style="color:#770088">default</span> {
<span style="color:#000000">async</span> <span style="color:#000000">asyncData</span>( <span style="color:#0000ff">content</span> ) {
<span style="color:#770088">let</span> [{<span style="color:#000000">数据</span>:<span style="color:#0000ff">别名1</span>},{<span style="color:#000000">数据</span>:<span style="color:#0000ff">别名2</span>}] <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">Promise</span>.<span style="color:#000000">all</span>([ <span style="color:#000000">ajax请求1</span>, <span style="color:#000000">ajax请求2</span>])
<span style="color:#770088">return</span> {
<span style="color:#000000">变量1</span>: <span style="color:#0055aa">别名1</span>,
<span style="color:#000000">变量2</span>: <span style="color:#0055aa">别名2</span>
}
},
}</span><span style="background-color:#f8f8f8">//演化过程
let response = ajax请求
let [response,response] = await Promise.all([ajax1,ajax2])
let [{data},{data}] = await Promise.all([ajax1,ajax2])
let [{data:别名1},{data:别名2}] = await Promise.all([ajax1,ajax2])</span>- 实例
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#555555">{{echo}}</span> <span style="color:#555555">{{echo2}}</span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
<span style="color:#000000">async</span> <span style="color:#000000">asyncData</span>(<span style="color:#0000ff">context</span>) {
<span style="color:#aa5500">// 发送ajax</span>
<span style="color:#770088">let</span> [{<span style="color:#000000">data</span>:<span style="color:#0000ff">echo</span>}, {<span style="color:#000000">data</span>:<span style="color:#0000ff">echo2</span>}] <span style="color:#981a1a">=</span>
<span style="color:#770088">await</span> <span style="color:#000000">Promise</span>.<span style="color:#000000">all</span>([
<span style="color:#0055aa">context</span>.<span style="color:#000000">$axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/feign/echo/abc'</span>),
<span style="color:#0055aa">context</span>.<span style="color:#000000">$axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/client/echo/abc'</span>)
])
<span style="color:#aa5500">// 返回数据</span>
<span style="color:#770088">return</span> {
<span style="color:#000000">echo</span>,
<span style="color:#000000">echo2</span>
}
},
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
</span></span>6.4 使用fetch发送 ajax
- fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。
步骤1：创建store/index.js
<span style="background-color:#f8f8f8"><span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">state</span> <span style="color:#981a1a">=</span> () <span style="color:#981a1a">=></span> ({
<span style="color:#000000">str</span>: <span style="color:#116644">0</span>
})
<span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">mutations</span> <span style="color:#981a1a">=</span> {
<span style="color:#000000">setData</span> (<span style="color:#0000ff">state</span>, <span style="color:#0000ff">value</span>) {
<span style="color:#0055aa">state</span>.<span style="color:#000000">str</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">value</span>
}
}</span>步骤2：测试页面
<span style="background-color:#f8f8f8"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#aa5500"><!-- 显示数据 --></span>
<span style="color:#555555">{{$store.state.str}}</span>
<span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
<span style="color:#000000">async</span> <span style="color:#000000">fetch</span>( {<span style="color:#0000ff">store</span>, <span style="color:#0000ff">$axios</span>} ) {
<span style="color:#aa5500">// 发送ajax</span>
<span style="color:#770088">let</span> { <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#0055aa">$axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/feign/echo/abc'</span>)
<span style="color:#aa5500">// 设置数据</span>
<span style="color:#0055aa">store</span>.<span style="color:#000000">commit</span>(<span style="color:#aa1111">'setData'</span> , <span style="color:#0055aa">data</span> )
}
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
</span>6.5 插件：自定义axios
6.5.0 分析
6.5.1 客户端
步骤一：在nuxt.conf.js中配置客户端插件，设置 mode 为 client
<span style="background-color:#f8f8f8"> <span style="color:#000000">plugins</span>: [
{ <span style="color:#000000">src</span>: <span style="color:#aa1111">'~plugins/api.js'</span>, <span style="color:#000000">mode</span>: <span style="color:#aa1111">'client'</span> }
<span style="color:#aa5500">//{ src: '~plugins/api.js', ssr: false }</span>
],</span>
步骤二：编写 plugins/api.js 对 内置的 $axios进行增强
<span style="background-color:#f8f8f8"><span style="color:#aa5500">//自定义函数</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">request</span> <span style="color:#981a1a">=</span> {
<span style="color:#000000">test</span> : (<span style="color:#0000ff">params</span>) <span style="color:#981a1a">=></span> {
<span style="color:#770088">return</span> <span style="color:#000000">axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/feign/echo/abc'</span>,{
<span style="color:#000000">params</span>
})
},
}
<span style="color:#770088">var</span> <span style="color:#0000ff">axios</span> <span style="color:#981a1a">=</span> <span style="color:#221199">null</span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> ({ <span style="color:#0000ff">$axios</span> }, <span style="color:#0000ff">inject</span>) <span style="color:#981a1a">=></span> {
<span style="color:#aa5500">//3） 保存内置的axios</span>
<span style="color:#000000">axios</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">$axios</span>
<span style="color:#aa5500">//4) 将自定义函数交于nuxt</span>
<span style="color:#aa5500">// 使用方式1：在vue中，this.$request.xxx()</span>
<span style="color:#aa5500">// 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()</span>
<span style="color:#0055aa">inject</span>(<span style="color:#aa1111">'request'</span>, <span style="color:#000000">request</span>)
}
</span>6.5.2 服务端
步骤一：配置服务端插件，设置 mode 为 server
<span style="background-color:#f8f8f8"> <span style="color:#000000">plugins</span>: [
{ <span style="color:#000000">src</span>: <span style="color:#aa1111">'~plugins/api.js'</span>, <span style="color:#000000">mode</span>: <span style="color:#aa1111">'client'</span> },
{ <span style="color:#000000">src</span>: <span style="color:#aa1111">'~plugins/api.server.js'</span>, <span style="color:#000000">mode</span>: <span style="color:#aa1111">'server'</span> },
<span style="color:#aa5500">//{ src: '~plugins/api.js', ssr: false },</span>
<span style="color:#aa5500">//{ src: '~plugins/api.server.js', ssr: true }</span>
],</span>步骤二：编写 plugins/api.server.js 对 内置的 $axios进行增强
<span style="background-color:#f8f8f8"><span style="color:#770088">const</span> <span style="color:#0000ff">request</span> <span style="color:#981a1a">=</span> {
<span style="color:#000000">test</span> : (<span style="color:#0000ff">params</span>) <span style="color:#981a1a">=></span> {
<span style="color:#770088">return</span> <span style="color:#000000">axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/feign/echo/abc'</span>,{
<span style="color:#000000">params</span>
})
},
}
<span style="color:#770088">var</span> <span style="color:#0000ff">axios</span> <span style="color:#981a1a">=</span> <span style="color:#221199">null</span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> ({ <span style="color:#0000ff">$axios</span>, <span style="color:#0000ff">redirect</span>, <span style="color:#0000ff">process</span> }, <span style="color:#0000ff">inject</span>) <span style="color:#981a1a">=></span> {
<span style="color:#aa5500">//赋值</span>
<span style="color:#000000">axios</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">$axios</span>
<span style="color:#aa5500">//4) 将自定义函数交于nuxt</span>
<span style="color:#aa5500">// 使用方式1：在vue中，this.$requestServer.xxx()</span>
<span style="color:#aa5500">// 使用方式2：在nuxt的asyncData中，content.app.$requestServer.xxx()</span>
<span style="color:#0055aa">inject</span>(<span style="color:#aa1111">'requestServer'</span>, <span style="color:#000000">request</span>)
}
</span>注意：前端服务端插件，不支持切换路由。也就是说刷新可以可以访问，使用<nuxt-link>切换不能访问。解决方案：修改mode，支持client和service。
6.5.3 插件配置总结
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//方式1：通过src设置文件，通过mode设置模式</span>
<span style="color:#000000">plugins</span>: [
{ <span style="color:#000000">src</span>: <span style="color:#aa1111">'~/plugins/apiclient.js'</span>, <span style="color:#000000">mode</span>: <span style="color:#aa1111">'client'</span> }, <span style="color:#aa5500">//前端客户端</span>
{ <span style="color:#000000">src</span>: <span style="color:#aa1111">'~/plugins/apiserver.js'</span>, <span style="color:#000000">mode</span>: <span style="color:#aa1111">'server'</span> }, <span style="color:#aa5500">//前端服务端</span>
{ <span style="color:#000000">src</span>: <span style="color:#aa1111">'~/plugins/api.js'</span> } <span style="color:#aa5500">//前端客户端 + 前端服务端</span>
]
<span style="color:#aa5500">//方式2：通过命名来确定模式</span>
<span style="color:#000000">plugins</span>: [
<span style="color:#aa1111">'~/plugins/api.client.js'</span>, <span style="color:#aa5500">//前端客户端</span>
<span style="color:#aa1111">'~/plugins/api.server.js'</span>, <span style="color:#aa5500">//前端服务端</span>
<span style="color:#aa1111">'~/plugins/api.js'</span>, <span style="color:#aa5500">//前端客户端 + 前端服务端</span>
]</span></span>6.5.4 服务器端插件使用总结
7. Vuex 状态树
7.1 根模块数据操作
步骤一：创建 store/index.js 添加一个 counter变量，并可以继续累加操作
<span style="background-color:#f8f8f8"><span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">state</span> <span style="color:#981a1a">=</span> () <span style="color:#981a1a">=></span> ({
<span style="color:#000000">counter</span>: <span style="color:#116644">0</span>
})
<span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">mutations</span> <span style="color:#981a1a">=</span> {
<span style="color:#000000">increment</span> (<span style="color:#0000ff">state</span>) {
<span style="color:#0055aa">state</span>.<span style="color:#000000">counter</span><span style="color:#981a1a">++</span>
}
}
</span>步骤二：在页面中，使用
<span style="background-color:#f8f8f8"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
首页 <span style="color:#555555">{{counter}}</span>
<span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"button"</span> <span style="color:#0000cc">value</span>=<span style="color:#aa1111">"+"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"increment"</span><span style="color:#117700">/></span>
<span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#770088">import</span> { <span style="color:#0000ff">mapState</span>,<span style="color:#0000ff">mapMutations</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'vuex'</span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
<span style="color:#000000">computed</span>: {
<span style="color:#555555">...</span><span style="color:#000000">mapState</span>([<span style="color:#aa1111">'counter'</span>])
},
<span style="color:#000000">methods</span>: {
<span style="color:#555555">...</span><span style="color:#000000">mapMutations</span>([<span style="color:#aa1111">'increment'</span>])
},
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
</span>7.2 其他模块数据操作
步骤一：创建其他模块 store/book.js
<span style="background-color:#f8f8f8"><span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">state</span> <span style="color:#981a1a">=</span> () <span style="color:#981a1a">=></span> ({
<span style="color:#000000">money</span>: <span style="color:#116644">0</span>
})
<span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">mutations</span> <span style="color:#981a1a">=</span> {
<span style="color:#000000">addmoney</span> (<span style="color:#0000ff">state</span>) {
<span style="color:#0055aa">state</span>.<span style="color:#000000">money</span> <span style="color:#981a1a">+=</span> <span style="color:#116644">5</span>
}
}</span>步骤二：使用指定模块中的数据
<span style="background-color:#f8f8f8"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
首页 <span style="color:#555555">{{money}}</span>
<span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"button"</span> <span style="color:#0000cc">value</span>=<span style="color:#aa1111">"+"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"addmoney"</span> <span style="color:#117700">/></span>
<span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#770088">import</span> { <span style="color:#0000ff">mapState</span>,<span style="color:#0000ff">mapMutations</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'vuex'</span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
<span style="color:#000000">computed</span>: {
<span style="color:#000000">money</span> () {
<span style="color:#770088">return</span> <span style="color:#770088">this</span>.<span style="color:#000000">$store</span>.<span style="color:#000000">state</span>.<span style="color:#000000">book</span>.<span style="color:#000000">money</span>
}
},
<span style="color:#000000">methods</span>: {
<span style="color:#555555">...</span><span style="color:#000000">mapMutations</span>({
<span style="color:#000000">addmoney</span>: <span style="color:#aa1111">'book/addmoney'</span>
})
},
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span></span>7.3 完整vuex模板
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// state为一个函数, 注意箭头函数写法</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">state</span> <span style="color:#981a1a">=</span> () <span style="color:#981a1a">=></span> ({
<span style="color:#000000">user</span>: <span style="color:#aa1111">'jack'</span>
})
<span style="color:#aa5500">// mutations为一个对象</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">mutations</span> <span style="color:#981a1a">=</span> {
<span style="color:#000000">setUser</span>(<span style="color:#0000ff">state</span>, <span style="color:#0000ff">value</span>) {
<span style="color:#0055aa">state</span>.<span style="color:#000000">counter</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">value</span>
}
}
<span style="color:#aa5500">// action执行mutation</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">actions</span> <span style="color:#981a1a">=</span> {
<span style="color:#000000">userAction</span> (<span style="color:#0000ff">context</span>,<span style="color:#0000ff">value</span>){
<span style="color:#aa5500">// 可以发送ajax</span>
<span style="color:#0055aa">context</span>.<span style="color:#000000">commit</span>(<span style="color:#aa1111">'setUser'</span>,<span style="color:#0055aa">value</span>)
}
}
<span style="color:#aa5500">// 获取数据</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">getters</span> <span style="color:#981a1a">=</span> {
<span style="color:#000000">getUser</span> (<span style="color:#0000ff">state</span>) {
<span style="color:#770088">return</span> <span style="color:#0055aa">state</span>.<span style="color:#000000">user</span>
}
}
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
<span style="color:#000000">namespace</span>: <span style="color:#221199">true</span>, <span style="color:#aa5500">// 命名空间，强制要求，在使用时，加上所属的模块名，例如：book/addmoney</span>
<span style="color:#000000">state</span>,
<span style="color:#000000">mutations</span>,
<span style="color:#000000">actions</span>,
<span style="color:#000000">getters</span>
}
</span></span>8. nuxt流程总结
9 综合练习
9.1 练习1：学生列表
表结构
<span style="background-color:#f8f8f8"><span style="color:#aa5500">#班级表</span>
<span style="color:#770088">create</span> <span style="color:#770088">table</span> tab_class<span style="color:#999977">(</span>
cid int <span style="color:#770088">primary</span> <span style="color:#770088">key</span> <span style="color:#770088">auto_increment</span>,
cname varchar<span style="color:#999977">(</span><span style="color:#116644">50</span><span style="color:#999977">)</span>
<span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_class<span style="color:#999977">(</span>cid, cname<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#116644">1</span>,<span style="color:#aa1111">'Java56'</span><span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_class<span style="color:#999977">(</span>cid, cname<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#116644">2</span>,<span style="color:#aa1111">'Java78'</span><span style="color:#999977">)</span>;
<span style="color:#aa5500">#学生表</span>
<span style="color:#770088">create</span> <span style="color:#770088">table</span> tab_student<span style="color:#999977">(</span>
sid int <span style="color:#770088">primary</span> <span style="color:#770088">key</span> <span style="color:#770088">auto_increment</span>,
sname varchar<span style="color:#999977">(</span><span style="color:#116644">50</span><span style="color:#999977">)</span>,
cid int
<span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_student<span style="color:#999977">(</span>sname,cid<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#aa1111">'张三'</span>,<span style="color:#116644">1</span><span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_student<span style="color:#999977">(</span>sname,cid<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#aa1111">'李四'</span>,<span style="color:#116644">1</span><span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_student<span style="color:#999977">(</span>sname,cid<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#aa1111">'王五'</span>,<span style="color:#116644">2</span><span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_student<span style="color:#999977">(</span>sname,cid<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#aa1111">'赵六'</span>,<span style="color:#116644">2</span><span style="color:#999977">)</span>;
</span>需求：查询学生列表信息
- 要求1：可以进行“班级”条件查询
- 要求2：对“班级”数据进行SEO
- 要求3：学生数据不进行SEO
9.2 练习2：
9.2.1 表结构：
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">CREATE</span> <span style="color:#770088">TABLE</span> tb_teacher<span style="color:#999977">(</span>
tid INT <span style="color:#770088">PRIMARY</span> <span style="color:#770088">KEY</span> <span style="color:#770088">AUTO_INCREMENT</span>,
tname VARCHAR<span style="color:#999977">(</span><span style="color:#116644">50</span><span style="color:#999977">)</span> <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'老师姓名'</span>,
TYPE INT <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'老师类型：1.授课老师、2.助理老师、3.辅导员老师'</span>
<span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">1</span>,<span style="color:#aa1111">'梁桐老师'</span>,<span style="color:#116644">1</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">2</span>,<span style="color:#aa1111">'马坤老师'</span>,<span style="color:#116644">2</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">3</span>,<span style="color:#aa1111">'仲燕老师'</span>,<span style="color:#116644">3</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">4</span>,<span style="color:#aa1111">'袁新奇老师'</span>,<span style="color:#116644">1</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">5</span>,<span style="color:#aa1111">'任林达老师'</span>,<span style="color:#116644">2</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">6</span>,<span style="color:#aa1111">'王珊珊老师'</span>,<span style="color:#116644">3</span><span style="color:#999977">)</span>;
<span style="color:#770088">CREATE</span> <span style="color:#770088">TABLE</span> tb_class<span style="color:#999977">(</span>
cid INT <span style="color:#770088">PRIMARY</span> <span style="color:#770088">KEY</span> <span style="color:#770088">AUTO_INCREMENT</span>,
cname VARCHAR<span style="color:#999977">(</span><span style="color:#116644">50</span><span style="color:#999977">)</span> <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'班级名称'</span>,
teacher1_id INT <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'授课老师'</span>,
teacher2_id INT <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'助理老师'</span>,
teacher3_id INT <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'辅导员老师'</span>
<span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_class<span style="color:#999977">(</span>cid,cname,teacher1_id,teacher2_id,teacher3_id<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">1</span>,<span style="color:#aa1111">'Java56'</span>,<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_class<span style="color:#999977">(</span>cid,cname,teacher1_id,teacher2_id,teacher3_id<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">2</span>,<span style="color:#aa1111">'Java78'</span>,<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_class<span style="color:#999977">(</span>cid,cname,teacher1_id,teacher2_id,teacher3_id<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">3</span>,<span style="color:#aa1111">'Java12'</span>,<span style="color:#116644">4</span>,<span style="color:#116644">5</span>,<span style="color:#116644">6</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_class<span style="color:#999977">(</span>cid,cname,teacher1_id,teacher2_id,teacher3_id<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">4</span>,<span style="color:#aa1111">'Java34'</span>,<span style="color:#116644">4</span>,<span style="color:#116644">5</span>,<span style="color:#116644">6</span><span style="color:#999977">)</span>;
</span></span>9.2.2 需求：查询
- 需求：使用“自定义axios”完成
- 查询班级详情
- 通过班级名称模糊查询
- 查询班级的同时，查询老师信息
9.2.3 扩展需求：添加
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-09-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
