目录
步骤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>
修改 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>
在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>
<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>
语法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>
步骤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>
步骤一:在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>
步骤一:配置服务端插件,设置 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。
<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>
步骤一:创建 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>
步骤一:创建其他模块 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>
<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>
表结构
<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>
需求:查询学生列表信息
<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>