Nuxt.js项目使用
1.配置Nginx
#静态资源
server {
listen 10000;
server_name 192.168.1.2;
location /static/img/ {
alias F:/develop/portal_static/img/;
}
location /static/css/ {
alias F:/develop/portal_static/css/;
}
location /static/js/ {
alias F:/develop/portal_static/js/;
}
location /static/plugins/ {
alias F:/develop/portal_static/plugins/;
add_header Access‐Control‐Allow‐Origin http://ucenter.deyunshe.com;
add_header Access‐Control‐Allow‐Credentials true;
add_header Access‐Control‐Allow‐Methods GET;
}
}
upstream dynamic_portal_server_pool{
server 192.168.1.2:10000 weight=10
server 192.168.1.3:10000 weight=10
}
#后台搜索（公开api）
upstream search_server_pool{
server 127.0.0.1:40100 weight=10;
}
#用户请求/crosstalk/search时Nginx将请求转发到nuxt.js服务，nginx在转发时根据每台nuxt服务的负载情况进行转发，实现负载均衡。
#前端门户相声搜索
location ^~ /crosstalk/search {
proxy_pass http://dynamic_portal_server_pool;
}
#后端搜索服务
location /openapi/search/ {
proxy_pass http://search_server_pool/search/;
}
#开发环境webpack定时加载此文件
location ^~ /__webpack_hmr {
proxy_pass http://dynamic_portal_server_pool/__webpack_hmr;
}
#开发环境nuxt访问_nuxt
location ^~ /_nuxt/ {
proxy_pass http://dynamic_portal_server_pool/_nuxt/;
}
2.#页面编码
<template>
<div>
<div class="learing-list">
<div class="list-box">
<ul>
<li>关键字：</li>
<ol>
<li>{{keyword}}
<nuxt-link v-if="keyword" class="title-link" :to="'/crosstalk/search?keyword=&mt='+mt+'&st=' + st+'&grade='+grade">
搜索
</nuxt-link>
</li>
</ol>
</ul>
<ul>
<li>相声类型：</li>
<li v-if="grade!=''">
<nuxt-link class="title-link" :to="'/crosstalk/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade='">全部
</nuxt-link>
</li>
<li class="all" v-else>全部</li>
<ol>
<li v-if="grade=='200001'" class="all">相声</li>
<li v-else><nuxt-link class="title-link" :to="'/crosstalk/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade=200001'">相声</nuxt-link></li>
<li v-if="grade=='200002'" class="all">快板</li>
<li v-else><nuxt-link class="title-link" :to="'/crosstalk/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade=200002'">快板</nuxt-link></li>
<li v-if="grade=='200003'" class="all">大鼓</li>
<li v-else><nuxt-link class="title-link" :to="'/crosstalk/search?keyword='+keyword+'&mt=' + mt+'&st='+st+'&grade=200003'">大鼓</nuxt-link></li>
</ol>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-9 list-row-left">
<div class="list-cont-left">
<div class="tit">
<ul class="nav nav-tabs ">
</ul>
</div>
<div class="tab-content">
<div class="content-list">
<div class="recom-item" v-for="(crosstalk, index) in crosstalklist">
<a :href="'/crosstalk/detail/'+crosstalk.id+'.html'" target="_blank">
<div v-if="crosstalk.pic">
<p><img :src="imgUrl+'/'+crosstalk.pic" width="100%" alt=""></p>
</div>
<div v-else>
<p><img src="/img/widget-demo1.png" width="100%" alt=""></p>
</div>
<ul >
<li class="crosstalk_title"><span v-html="crosstalk.name"></span></li>
<li style="float: left">{{crosstalk.actor}}</span>
</ul>
</a>
</div>
<li class="clearfix"></li>
</div>
<div class="clearfix"></div>
</div>
</div>
<div style="text-align: center">
<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
:total="total" :page-size="page_size" :current-page="page" prev-text="上一页" next-text="下一页">
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
//配置文件
let config = require('~/config/sysConfig')
import querystring from 'querystring'
import * as crosstalkApi from '~/api/crosstalk'
export default {
head() {
return {
title: '德云社-将相声发扬光大',
meta: [
{charset: 'utf-8'},
{name: 'description', content: '商业演出、慈善演出、相声培训、其他曲艺'},
{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 }) {//服务端调用方法
let page = route.query.page;
if(!page){
page = 1;
}else{
page = Number.parseInt(page)
}
//向java微服务发起请求搜索数据
let crosstalk_data = await crosstalkApi.search_crosstalk(page,2,route.query);
//查询分类
let category_data = await crosstalkApi.sysres_category()
if (crosstalk_data && crosstalk_data.queryResult ) {
//全部分类
let category = category_data.category//分部分类
let keywords = ''
let grade=''
let total = crosstalk_data.queryResult.total
if( route.query.grade){
grade = route.query.grade
}
if( route.query.keyword){
keyword = route.query.keyword
}
return {
crosstalklist: crosstalk_data.queryResult.list,//课程列表
category:category,
grade:grade,
keyword:keyword,
page:page,
total:total,
imgUrl:config.imgUrl
}
}else{
return {
crosstalklist: {},//课程列表
category:{},
grade:'',
keyword:'',
page:page,
total:0,
imgUrl:config.imgUrl
}
}
},
data(){
return {
crosstalklist: {},
category:{},
grade:'',
keyword:'',
imgUrl:config.imgUrl,
total:0,//总记录数
page:1,//页码
page_size:2//每页显示个数
}
},
watch:{//路由发生变化立即搜索search表示search方法
'$route':'search'
},
methods:{
handleCurrentChange(page) {
this.page = page
this.$route.query.page = page
let querys = querystring.stringify(this.$route.query)
window.location = '/crosstalk/search?'+querys;
},
search(){
window.location.reload();
}
},
}
</script>
<style>
</style>
3.JS
import http from './public'
import qs from 'qs'
let config = require('~/config/sysConfig')
let apiURL = config.apiURL
let staticURL = config.staticURL
if (typeof window === 'undefined') {
apiURL = config.backApiURL
staticURL = config.backStaticURL
}
/*搜索*/
export const search_course = (page,size,params) => {
let querys = qs.stringify(params);
return http.requestQuickGet(apiURL+"/search/course/list/"+page+"/"+size+"?"+querys);
}
/*获取分类*/
export const sysres_category = () => {
return http.requestQuickGet(staticURL+"/category/category.json");
}
浙公网安备 33010602011771号