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，页面效果如下：
|
|
收藏
淘帖
踩
