黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day12(九) [打印本页]

作者: 谷粒姐姐    时间: 2019-5-10 10:53
标题: 【郑州校区】Java的新项目学成在线笔记-day12(九)
3.1.4 搜索页面
创建搜索页面如下:


页面文件参考:“资料”--》“search”--》index_1.vue,重要代码如下:
nuxt.js支持定义header,本页面我们在header中引入css样式并定义头部信息。

[AppleScript] 纯文本查看 复制代码
//配置文件 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] 纯文本查看 复制代码
 
//配置文件 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] 纯文本查看 复制代码
 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,页面效果如下:









欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2