Java的新项目学成在线笔记-day12（九）

3.1.4 搜索页面  创建搜索页面如下：   页面文件参考：“资料”--》“search”--》index_1.vue，重要代码如下： nuxt.js支持定义header，本页面我们在header中引入css样式并定义头部信息。   [AppleScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 //配置文件 let config = require('~/config/sysConfig') import querystring from 'querystring' import * as courseApi from '~/api/course' export default {   head() {     return {       title: '传智播客‐一样的教育,不一样的品质',       meta: [         {charset: 'utf‐8'},         {name: 'description', content: '传智播客专注IT培训,Java培训,Android培训,安卓培训,PHP培 训,C++培训,网页设计培训,平面设计培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,云计算大数据培训, 全栈工程师培训,产品经理培训。'},         {name: 'keywords', content: this.keywords}       ],       link: [         {rel: 'stylesheet', href: '/static/plugins/normalize‐css/normalize.css'},         {rel: 'stylesheet', href: '/static/plugins/bootstrap/dist/css/bootstrap.css'},         {rel: 'stylesheet', href: '/static/css/page‐learing‐list.css'}       ]     }   }, 其它数据模型及方法：   [AppleScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 //配置文件 let config = require('~/config/sysConfig') import querystring from 'querystring' import * as courseApi from '~/api/course' export default {   head() {     return {       title: '传智播客‐一样的教育,不一样的品质',       meta: [         {charset: 'utf‐8'},         {name: 'description', content: '传智播客专注IT培训,Java培训,Android培训,安卓培训,PHP培 训,C++培训,网页设计培训,平面设计培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,云计算大数据培训, 全栈工程师培训,产品经理培训。'},         {name: 'keywords', content: this.keywords}       ],       link: [         {rel: 'stylesheet', href: '/static/plugins/normalize‐css/normalize.css'},         {rel: 'stylesheet', href: '/static/plugins/bootstrap/dist/css/bootstrap.css'},         {rel: 'stylesheet', href: '/static/css/page‐learing‐list.css'}       ]     }   }, <script>   //配置文件   let config = require('~/config/sysConfig')   import querystring from 'querystring'   import * as courseApi from '~/api/course'   export default {     head() {       return {         title: '传智播客‐一样的教育,不一样的品质',         meta: [           {charset: 'utf‐8'},           {name: 'description', content: '传智播客专注IT培训,Java培训,Android培训,安卓培训,PHP培 训,C++培训,网页设计培训,平面设计培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,云计算大数据培训, 全栈工程师培训,产品经理培训。'},           {name: 'keywords', content: this.keywords}         ],         link: [           {rel: 'stylesheet', href: '/static/plugins/normalize‐css/normalize.css'},           {rel: 'stylesheet', href: '/static/plugins/bootstrap/dist/css/bootstrap.css'},           {rel: 'stylesheet', href: '/static/css/page‐learing‐list.css'}         ]       }     },     async asyncData({ store, route }) {       return {         courselist: {},         first_category:{},   [AppleScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 second_category:{},         mt:'',         st:'',         grade:'',         keyword:'',         total:0,         imgUrl:config.imgUrl       }     },     data() {       return {         courselist: {},         first_category:{},         second_category:{},         mt:'',         st:'',         grade:'',         keyword:'',         imgUrl:config.imgUrl,         total:0,//总记录数         page:1,//页码         page_size:12//每页显示个数       }     },     watch:{//路由发生变化立即搜索sea rch表示search方法       '$route':'search'     },     methods: {       //分页触发       handleCurrentChange(page) {         },       //搜索方法       search(){ //刷新当前页面                  window.location.reload();       }     }   } </script> 3.1.5 测试  重启Nginx，请求：http://www.xuecheng.com/course/search，页面效果如下：