提交 7d9472ee authored 作者: 龙菲's avatar 龙菲

feat:文物列表和详情

上级 3debb48b
NODE_ENV = 'development' NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev' VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASE_API = 'http://127.0.0.1:4523/m1/1100718-0-default/' VUE_APP_BASE_API = 'http://172.24.100.189:8080'
\ No newline at end of file \ No newline at end of file
<template> <template>
<div id="app"> <div id="app">
<!-- <NavBar /> --> <NavBar />
<!-- <Footer /> -->
<router-view /> <router-view />
<Footer />
</div> </div>
</template> </template>
<script> <script>
// import NavBar from "@/components/NavBar"; import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
// export default { export default {
// components: { NavBar, Footer }, components: { NavBar, Footer },
// }; };
</script> </script>
<style lang="scss"> <style lang="scss">
#app { #app {
...@@ -24,5 +23,12 @@ body { ...@@ -24,5 +23,12 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #f7f7f7; background: #f7f7f7;
box-sizing: border-box;
}
div,
span,
ul,
li {
box-sizing: border-box;
} }
</style> </style>
import request from '@/utils/request'
export function getCulturalRelicList(data) {
return request({
url: '/bizCulturalRelic/listByPage',
method: 'post',
data
})
}
// 根据文物id查询详情
export function getRCDetailById(params) {
return request({
url: '/bizCulturalRelic/listById',
method: 'get',
params
})
}
import request from '@/utils/request'
/**
*
* @param {*} data 查询参数 data{limit:100,page:1,dictId:xxx}
*
*/
export function getDictCode(data) {
return request({
url: '/sysDictDetail/getDictDetailsByTypes',
method: 'post',
data
})
}
import request from '@/utils/request'
// 获取布展列表
export function getList(data) {
return request({
url: '/bizExhibition/listByPage',
method: 'post',
data
})
}
export function getDisplayById(params) {
return request({
url: '/bizExhibition/listById',
method: 'get',
params
})
}
import request from '@/utils/request'
export function getLiteratureList(data) {
return request({
url: 'sysLiterature/listByPage',
method: 'post',
data
})
}
import request from '@/utils/request'
export function getMuseumTree(params) {
return request({
url: '/sys/dept/tree',
method: 'get',
params
})
}
export function getMuseumTreeV1(params) {
return request({
url: '/sys/dept/v1/tree',
method: 'get',
params
})
}
export function addMuseum(data) {
return request({
url: '/sys/dept',
method: 'post',
data
})
}
export function editMuseum(data) {
return request({
url: '/sys/dept',
method: 'put',
data
})
}
// 获取博物馆列表
export function getMuseumList(params) {
return request({
url: '/sys/depts',
method: 'get',
params
})
}
// 根据博物馆id查询详情
export function getMSDetailById(id) {
return request({
url: `/sys/dept/${id}`,
method: 'get',
})
}
// 删除博物馆
export function deleteMuseum(id) {
return request({
url: `/sys/dept/${id}`,
method: 'delete',
})
}
// 查询行政区划树
export function getSysRegionTree(params) {
return request({
url: `/sysRegion/tree`,
method: 'get',
params
})
}
import {
getDictCode
} from "@/api/dict";
import {
getLiteratureList
} from '@/api/literature'
import store from "@/store";
import Vue from "vue";
class Dict {
constructor(dict) {
this.dict = dict;
}
async init(names) {
// 先判断list中的name是否存在,如果不存在,把不存在的放置在一个list中,再对list进行获取
var nonExistentNames = []
// debugger
names.forEach(name => {
if (store.getters.dicts[name]) {
Vue.set(this.dict, name, store.getters.dicts[name]);
} else {
nonExistentNames.push(name) //存入list中,单独进行处理调用
}
});
var index = nonExistentNames.indexOf('literature')
if (index != -1) {
// debugger
Vue.set(this.dict, 'literature', []);
nonExistentNames.splice(index, 1)
var params = {
limit: 100,
page: 1
}
var res = await getLiteratureList(params)
if (res.code == 0) {
var literatureList = res.data.records
Vue.set(this.dict, 'literature', literatureList);
this.dict['literature'] = Object.freeze(literatureList)
store.commit("dict/SET_DICTS", {
label: 'literature',
value: Object.freeze(literatureList),
});
}
}
if (nonExistentNames.length > 0) {
// debugger
var res = await getDictCode(nonExistentNames)
nonExistentNames.forEach(n => {
Vue.set(this.dict, n, []);
// var arr = []
var obj = {}
if (res.code == 0) {
res.data.map(item => {
if (item.dictType === n) {
obj[item.value]=item.label
}
})
this.dict[n] = Object.freeze(obj)
store.commit("dict/SET_DICTS", {
label: n,
value: Object.freeze(obj),
});
}
})
}
}
}
const install = function (Vue) {
Vue.mixin({
data() {
// 如果在调用组件处data中有定义dicts,再进行初始化dict
if (
this.$options.dicts instanceof Array &&
this.$options.dicts.length > 0
) {
return {
dict: {}
};
} else {
return {};
}
},
created() {
// 如果在调用组件处data中有定义dicts,再进行获取dicts中定义的字典
if (
this.$options.dicts instanceof Array &&
this.$options.dicts.length > 0
) {
new Dict(this.dict).init(this.$options.dicts);
}
},
});
};
export default {
install
};
<template> <template>
<div class="nav"> <div class="nav">
<div class="title">贵州省精品展览展示平台</div> <div class="container">
<div class="tabs" v-for="(item, index) in pages" :key="index"> <div class="title">贵州省精品展览展示平台</div>
<router-link :to="item.path">{{ item.name }}</router-link> <div class="right">
</div> <div class="tabs">
<div class="operation"> <router-link
<span v-if="isLogged">欢迎你,{{ userInfo.userName }}</span> :to="item.path"
<router-link v-if="!isLogged" to="/login" class="operation-item" v-for="(item, index) in pages"
>登陆</router-link :key="index"
>| class="tab-item"
<router-link to="/personal" class="operation-item">个人中心</router-link>| >{{ item.name }}</router-link
<span class="logout"> >
<el-popover </div>
placement="bottom" <div class="operation">
width="200" <span v-if="isLogged">欢迎你,{{ userInfo.userName }}</span>
trigger="click" <router-link v-if="!isLogged" to="/login" class="operation-item"
v-model="logoutDialogVisible" >登陆</router-link
> >|
<p>确定退出吗?</p> <router-link to="/personal" class="operation-item"
<div style="text-align: right; margin: 0"> >个人中心</router-link
<el-button >|
size="mini" <span class="logout">
type="text" <el-popover
@click="logoutDialogVisible = false" placement="bottom"
>取消</el-button width="200"
> trigger="click"
<el-button type="primary" size="mini" @click="handleLogOut" v-model="logoutDialogVisible"
>确定</el-button
> >
</div> <p>确定退出吗?</p>
<span class="operation-item" slot="reference">退出</span> <div style="text-align: right; margin: 0">
</el-popover> <el-button
</span> size="mini"
type="text"
@click="logoutDialogVisible = false"
>取消</el-button
>
<el-button type="primary" size="mini" @click="handleLogOut"
>确定</el-button
>
</div>
<span class="operation-item" slot="reference">退出</span>
</el-popover>
</span>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -90,25 +102,41 @@ a { ...@@ -90,25 +102,41 @@ a {
text-decoration: none; text-decoration: none;
} }
.nav { .nav {
display: flex;
height: 120px; height: 120px;
align-items: center; width: 100%;
justify-content: space-between; // background-color: #1e5fbb;
margin: auto; // box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
width: 1200px; .container {
.title { width: 100%;
font-size: 30px; height: 100%;
font-weight: bold;
}
.tabs {
display: flex; display: flex;
margin-right: 5px; align-items: center;
} justify-content: space-between;
.operation { padding: 0 100px;
.operation-item { .title {
margin-right: 8px; font-size: 30px;
cursor: pointer; // font-weight: bold;
color: #000; font-family: LiSu;
// color: #c8945b;
}
.right {
display: flex;
.tabs {
display: flex;
margin-right: 100px;
.tab-item{
margin-right: 80px;
// color: #fff;
}
}
.operation {
.operation-item {
margin-right: 8px;
cursor: pointer;
// color: #fff;
}
}
} }
} }
} }
......
<!-- --> <!-- -->
<template> <template>
<div class="search-bar"> <div class="search-bar">
<el-select v-model="select" placeholder="请选择"> <!-- <el-select v-model="select" placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
:value="item.value" :value="item.value"
> >
</el-option> </el-option>
</el-select> </el-select> -->
<el-input <el-input
v-model="searchValue" v-model="searchValue"
placeholder="请输入关键词" placeholder="请输入关键词"
......
...@@ -11,6 +11,8 @@ import 'element-ui/lib/theme-chalk/index.css'; ...@@ -11,6 +11,8 @@ import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI); Vue.use(ElementUI);
// Vue.prototype.$echarts = echarts // Vue.prototype.$echarts = echarts
import dict from '@/components/Dict'
Vue.use(dict);
new Vue({ new Vue({
router, router,
......
...@@ -43,7 +43,7 @@ const routes = [ ...@@ -43,7 +43,7 @@ const routes = [
}, },
// 文物详情页 // 文物详情页
{ {
path: '/culturalRelic/:id', path: '/culturalRelic/:crId',
name: 'culturalRelicDetail', name: 'culturalRelicDetail',
component: () => import('@/views/culturalRelic/Detail.vue') component: () => import('@/views/culturalRelic/Detail.vue')
}, },
......
const getters = { const getters = {
// 用户 token: state => state.user.token,
token: state => state.user.token, userInfo: state => state.user.userInfo,
avatar: state => state.user.userInfo.avatar, avatar: state => state.user.avatar,
name: state => state.user.userInfo.name, name: state => state.user.name,
userInfo: state => state.user.userInfo, dicts: state => state.dict.dicts,
} museumTree: state => state.org.museumTree
export default getters }
export default getters
\ No newline at end of file
...@@ -2,12 +2,16 @@ import Vue from 'vue' ...@@ -2,12 +2,16 @@ import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import getters from './getters' import getters from './getters'
import user from './modules/user' import user from './modules/user'
import dict from './modules/dict'
import org from './modules/org'
Vue.use(Vuex) Vue.use(Vuex)
const store = new Vuex.Store({ const store = new Vuex.Store({
modules: { modules: {
user, user,
dict,
org
}, },
getters getters
}) })
......
const state = {
dicts: {},
};
const mutations = {
SET_DICTS(state, obj) {
state.dicts[obj.label] = obj.value;
},
};
export default {
namespaced: true,
state,
mutations,
};
\ No newline at end of file
import {
getMuseumTreeV1,
getSysRegionTree
} from '@/api/org'
const getDefaultState = () => {
return {
museumTree: [], //博物馆树
regionTree: [], //行政区划树
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_MUSEUM_TREE: (state, museumTree) => {
state.museumTree = museumTree
},
SET_REGION_TREE: (state, regionTree) => {
state.regionTree = regionTree
}
}
const actions = {
getMuseumTreeData({
commit
}, isReload) {
// 如果是空或者需要重新加载则重新调取接口获取,否则直接获取状态管理中的
if (state.museumTree || state.museumTree.length < 0 || isReload) {
return new Promise((resolve, reject) => {
getMuseumTreeV1({
deptId: ''
}).then(response => {
const {
data
} = response
commit('SET_MUSEUM_TREE', data)
resolve(data)
}).catch(error => {
reject(error)
})
})
} else {
return new Promise((resolve, reject) => {
resolve(state.museumTree)
})
}
},
getSysRegionTreeData({
commit
}, parentId) {
if (state.regionTree && state.regionTree.length > 0) {
return new Promise((resolve, reject) => {
resolve(state.regionTree)
})
} else {
return new Promise((resolve, reject) => {
getSysRegionTree({
parentId
}).then(response => {
const {
data
} = response
commit('SET_REGION_TREE', data)
resolve(data)
}).catch(error => {
reject(error)
})
})
}
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
import { import {
login, login,
// getInfo, logout,
// getAsyncRouter } from '@/api/user'
} from '@/api/user'
import { import {
getToken, getToken,
setToken, setToken,
removeToken, removeToken,
getUserInfo, getUserInfo,
setUserInfo, setUserInfo,
removeUserInfo, removeUserInfo
} from '@/utils/auth' } from '@/utils/auth'
const getDefaultState = () => { const getDefaultState = () => {
return { return {
token: getToken(), token: getToken(),
userInfo: getUserInfo(), userInfo:getUserInfo(),
name: '',
avatar: '',
// deptList:{}
} }
} }
const state = getDefaultState() const state = getDefaultState()
const mutations = { const mutations = {
...@@ -27,11 +30,19 @@ const mutations = { ...@@ -27,11 +30,19 @@ const mutations = {
}, },
SET_TOKEN: (state, token) => { SET_TOKEN: (state, token) => {
state.token = token state.token = token
console.log('登录后存在vuex中token',token);
}, },
SET_INFO: (state, userInfo) => { SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_USERINFO: (state, userInfo) => {
state.userInfo = userInfo state.userInfo = userInfo
}, },
// SET_DEPTLIST:(state,deptList)=>{
// state.deptList = deptList
// }
} }
const actions = { const actions = {
...@@ -39,50 +50,60 @@ const actions = { ...@@ -39,50 +50,60 @@ const actions = {
login({ login({
commit commit
}, userInfo) { }, userInfo) {
const {
username,
password,
captcha
} = userInfo
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login(userInfo).then(response => { login({
if (response.code != 0) { username: username.trim(),
userInfo.fail(response) password: password,
} else { captcha: captcha
const { }).then(response => {
data,
token
} = response
commit('SET_TOKEN', token)
commit('SET_INFO', data)
setToken(token)
setUserInfo(data)
resolve()
}
}).catch(error => {
reject(error)
})
})
},
// get user info
getInfo({
commit,
state
}) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { const {
data data
} = response } = response
commit('SET_TOKEN', data.accessToken)
if (!data) { commit('SET_NAME', data.username)
reject('Verification failed, please Login again.') commit('SET_USERINFO', data)
} setToken(data.accessToken)
commit('SET_INFO', data)
setUserInfo(data) setUserInfo(data)
resolve(data) resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
}) })
}) })
}, },
// get user info
// getInfo({
// commit,
// state
// }) {
// return new Promise((resolve, reject) => {
// getInfo(state.token).then(response => {
// const {
// data
// } = response
// if (!data) {
// return reject('Verification failed, please Login again.')
// }
// const {
// name,
// avatar
// } = data
// commit('SET_NAME', name)
// commit('SET_AVATAR', avatar)
// resolve(data)
// }).catch(error => {
// reject(error)
// })
// })
// },
// user logout // user logout
logout({ logout({
...@@ -90,11 +111,15 @@ const actions = { ...@@ -90,11 +111,15 @@ const actions = {
state state
}) { }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// logout(state.token).then(() => { logout(state.token).then(() => {
removeToken() // must remove token first removeToken() // must remove token first
removeUserInfo() removeUserInfo()
commit('RESET_STATE') commit('RESET_STATE')
resolve() resolve()
}).catch(error => {
console.log('err',error);
// reject(error)
})
}) })
}, },
...@@ -104,12 +129,28 @@ const actions = { ...@@ -104,12 +129,28 @@ const actions = {
}) { }) {
return new Promise(resolve => { return new Promise(resolve => {
removeToken() // must remove token first removeToken() // must remove token first
removeUserInfo()
commit('RESET_STATE') commit('RESET_STATE')
resolve() resolve()
}) })
}, },
// getDeptList({
// commit,
// state
// }) {
// return new Promise((resolve, reject) => {
// let deptRes = await getDepList();
// let deptList = {};
// deptRes.data.map((dept) => {
// deptList[dept[id]] = {
// name: dept.name,
// regionCode: dept.regionCode,
// };
// });
// this.$store.commit('SET_DEPTLIST',deptList)
// })
// },
} }
export default { export default {
......
...@@ -4,7 +4,6 @@ const TokenKey = 'bwgzl_token' ...@@ -4,7 +4,6 @@ const TokenKey = 'bwgzl_token'
const UserInfoKey = 'bwgzl_user_info' const UserInfoKey = 'bwgzl_user_info'
export function getToken() { export function getToken() {
console.log('刷新后getToken',Cookies.get(TokenKey));
return Cookies.get(TokenKey) return Cookies.get(TokenKey)
} }
...@@ -17,7 +16,6 @@ export function removeToken() { ...@@ -17,7 +16,6 @@ export function removeToken() {
} }
export function getUserInfo() { export function getUserInfo() {
console.log('刷新后getUserInfo',JSON.parse(localStorage.getItem(UserInfoKey)));
return JSON.parse(localStorage.getItem(UserInfoKey)) return JSON.parse(localStorage.getItem(UserInfoKey))
} }
......
// 导入axios
import axios from 'axios' import axios from 'axios'
// 使用element-ui Message做消息提醒
import { import {
MessageBox,
Message Message
} from 'element-ui'; } from 'element-ui'
import store from '@/store'
import { import {
getToken getToken
} from '@/utils/auth' } from '@/utils/auth'
//1. 创建新的axios实例,
// create an axios instance
const service = axios.create({ const service = axios.create({
// baseURL: process.env.BASE_API, // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
baseURL: '/api', baseURL: '/api',
// 超时时间 单位是ms,这里设置了3s的超时时间 timeout: 5000,
timeout: 3 * 1000
}) })
// 2.请求拦截器 // request interceptor
service.interceptors.request.use(config => { service.interceptors.request.use(
//发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加 config => {
config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换 // do something before request is sent
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded' //配置请求头 if (getToken()) {
} // let each request carry token
const token = getToken(); // ['X-Token'] is a custom headers key
if (token) { // please modify it according to the actual situation
config.params = { config.headers['authorization'] = getToken()
'token': token }
} //如果要求携带在参数中 return config
config.headers.token = token; //如果要求携带在请求头中 },
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
} }
return config )
}, error => {
Promise.reject(error)
})
// 3.响应拦截器 // response interceptor
service.interceptors.response.use( service.interceptors.response.use(
(response) => { /**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data const res = response.data
if (response.config.responseType !== 'blob') { // console.log('响应拦截res--------',response);
if (res.code !== 0) { if (response.config.url === '/api/sys/getVerify') {
Message({ // debugger
message: res.msg || 'Error', return res
type: 'error', }
duration: 3 * 1000, // debugger
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 0) {
Message({
message: res.msg || 'Error',
type: 'error',
duration: 5 * 1000
})
// 401001l令牌过期;
if (res.code === 401001) {
MessageBox.confirm('登录令牌已过期,请重新登录', '确认退出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
}) })
return Promise.reject(new Error(res.msg || 'Error'))
} else {
return res
} }
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014 || res.code ===401001) {
// // to re-login
// MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
// confirmButtonText: 'Re-Login',
// cancelButtonText: 'Cancel',
// type: 'warning'
// }).then(() => {
// store.dispatch('user/resetToken').then(() => {
// location.reload()
// })
// })
// }
return Promise.reject(new Error(res.msg || 'Error'))
} else {
return res
} }
return res
}, },
(error) => { error => {
let res = error.response console.log('err' + error) // for debug
if (error.response) { Message({
if (res.status == 401) { message: error.msg,
Vue.prototype.parentFns.portal_logout() type: 'error',
} duration: 5 * 1000
} })
return Promise.reject(error) return Promise.reject(error)
} }
) )
//4.导入文件
export default service export default service
<template> <template>
<div class="boutique"> <div class="boutique">
<NavBar /> <!-- <NavBar /> -->
<h1>精品展</h1> <h1>精品展</h1>
<Footer /> <!-- <Footer /> -->
</div> </div>
</template> </template>
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<script> <script>
export default { export default {
name: "Area", name: "Region",
data() { data() {
return { return {
area: [ area: [
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="recommend-list"> <div class="recommend-list">
<div class="recommend-item"> <div class="recommend-item">
<div class="recommend-item-container boutique"> <div class="recommend-item-container boutique">
<NavBar class="navBar" /> <!-- <NavBar class="navBar" /> -->
<el-carousel height="100vh" style="width: 100%"> <el-carousel height="100vh" style="width: 100%">
<el-carousel-item v-for="(item,index) in [1,2,3]" :key="index"> <el-carousel-item v-for="(item,index) in [1,2,3]" :key="index">
<h3 <h3
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<!-- <MuseumMap /> --> <!-- <MuseumMap /> -->
</div> </div>
</div> </div>
<Footer /> <!-- <Footer /> -->
</div> </div>
</template> </template>
......
<template> <template>
<div class="virtual"> <div class="virtual">
<NavBar /> <!-- <NavBar /> -->
<h1>虚拟展厅</h1> <h1>虚拟展厅</h1>
<Footer /> <!-- <Footer /> -->
</div> </div>
</template> </template>
......
...@@ -16,7 +16,7 @@ module.exports = defineConfig({ ...@@ -16,7 +16,7 @@ module.exports = defineConfig({
hot: true, hot: true,
proxy: { proxy: {
'/api': { '/api': {
target: 'http://127.0.0.1:4523/m1/1100718-0-default', target: 'http://172.24.100.189:8080',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/api': '' '^/api': ''
...@@ -33,18 +33,15 @@ module.exports = defineConfig({ ...@@ -33,18 +33,15 @@ module.exports = defineConfig({
return args return args
}) })
}, },
configureWebpack: config => { configureWebpack: {
const configuration = { // provide the app's title in webpack's name field, so that
// provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title.
// it can be accessed in index.html to inject the correct title. resolve: {
// name: name, alias: {
resolve: { '@': resolve('src')
alias: {
'@': resolve('src')
}
} }
} }
return configuration
}, },
}) })
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论