first commit

master
Joe 2 years ago
commit b336539c1b

24
.gitignore vendored

@ -0,0 +1,24 @@
.DS_Store
node_modules
/dist
package-lock.json
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

@ -0,0 +1,24 @@
# shop-tour-front
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

@ -0,0 +1,12 @@
module.exports = {
// vuecli3 不需要配置transform-vue-jsx
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry',
polyfills: ['es6.promise', 'es6.symbol']
}
]
]
}

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

@ -0,0 +1,52 @@
{
"name": "shop-tour-front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"amfe-flexible": "^2.2.1",
"ant-design-vue": "^1.7.8",
"axios": "^1.1.2",
"core-js": "^3.8.3",
"es6-promise": "^4.2.8",
"vue": "^2.6.14",
"vue-infinite-scroll": "^2.0.2",
"vue-router": "^3.5.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-plugin-import": "^1.13.5",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"postcss-pxtorem": "^6.0.0",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

@ -0,0 +1,10 @@
module.exports = {
plugins: {
autoprefixer: {},
// flexible配置
// "postcss-pxtorem": {
// "rootValue": 40, // 设计稿宽度的1/10
// "propList": ["*"] // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
// }
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>电力工程现行法律法规标准索引</title>
</head>
<body>
<noscript>
<strong>We're sorry but Demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

@ -0,0 +1,81 @@
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
cursor: pointer
}
/* 改变a链接的默认样式,颜色和下划线 */
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "5B8B4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
zoom: 1
}
</style>

@ -0,0 +1,128 @@
import axios from 'axios'
// 请求url
axios.defaults.baseURL = 'http://47.92.229.12:8888'
// axios.defaults.baseURL = 'http://visitor.emaylearningsh.com/api'
axios.defaults.timeout = 10000
let cancel, promiseArr = {}
const CancelToken = axios.CancelToken;
// POST传参序列化
axios.interceptors.request.use((config) => {
// 发起请求时,取消掉当前正在进行的相同请求
if (promiseArr[config.url]) {
promiseArr[config.url]('操作取消')
promiseArr[config.url] = cancel
} else {
promiseArr[config.url] = cancel
}
// token
const token = JSON.parse(sessionStorage.getItem('token'))
if (token) {
config.headers.Authorization = token;
}
return config;
}, (error) => {
return Promise.reject(error);
});
//返回状态判断
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if (response.data.retcode === 201) {
sessionStorage.removeItem('token');
router.replace({
path: 'login',
query: { redirect: router.currentRoute.fullPath } //登录成功后跳入浏览的当前页面
})
}
return response;
}, function (error) {
// 对响应错误做点什么
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求'
break;
case 401:
// 这里写清除token的代码
sessionStorage.removeItem('token');
router.replace({
path: 'login',
query: { redirect: router.currentRoute.fullPath } //登录成功后跳入浏览的当前页面
})
error.message = '未授权,请重新登录'
break;
case 403:
error.message = '拒绝访问'
break;
case 404:
error.message = '请求错误,未找到该资源'
break;
case 405:
error.message = '请求方法未允许'
break;
case 408:
error.message = '请求超时'
break;
case 500:
error.message = '服务器端出错'
break;
case 501:
error.message = '网络未实现'
break;
case 502:
error.message = '网络错误'
break;
case 503:
error.message = '服务不可用'
break;
case 504:
error.message = '网络超时'
break;
case 505:
error.message = 'http版本不支持该请求'
break;
default:
error.message = `连接错误${error.response.status}`
}
} else {
error.message = "连接到服务器失败"
}
//Message.error({message: error.message});
return Promise.resolve(error.response)
});
//export default axios;
export default {
//get请求
get(url, param) {
return new Promise((resolve) => {
axios({
method: 'get',
url,
params: param,
cancelToken: new CancelToken(c => {
cancel = c
})
}).then(res => {
resolve(res)
})
})
},
//post请求
post(url, param) {
return new Promise((resolve) => {
axios({
method: 'post',
url,
data: param,
cancelToken: new CancelToken(c => {
cancel = c
})
}).then(res => {
resolve(res)
})
})
}
}

@ -0,0 +1,27 @@
import '@babel/polyfill'
import Vue from 'vue'
import router from './router'
import App from './App.vue'
import axios from "./axios"
import 'ant-design-vue/dist/antd.css';
import { Input, List, Spin, message, Button, Form } from 'ant-design-vue';
Vue.use(Input);
Vue.use(Button);
Vue.use(List);
Vue.use(Spin);
Vue.use(Form)
import 'amfe-flexible'
Vue.config.productionTip = false
Vue.prototype.$https = axios;
Vue.prototype.$message = message;
Vue.prototype.$form = Form;
new Vue({
el: '#app',
router,
// 注册仓库:
render: h => h(App),
}).$mount('#app')

@ -0,0 +1,66 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import Login from '@/views/Login'
import Detail from '@/views/Detail'
Vue.use(Router)
const routes = [
{
path: '/login',
name: 'login',
component: Login,
meta: {
title: '登录',
}
},
{
path: '/',
name: 'MyHome',
component: Home,
meta: {
title: '电力工程现行法律法规标准索引',
requireAuth: true,
}
},
{
path: '/detail',
name: 'MyDetail',
component: Detail,
meta: {
title: '电力工程现行法律法规标准索引',
requireAuth: true,
}
},
];
const router = new Router({
routes
});
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
if (to.meta.requireAuth) { // 如果路由项需要权限校验
/*
从Vuex拿出token码说明已登陆
前端的token可伪造所以这并不是完全靠谱后面继续说
*/
if (JSON.parse(sessionStorage.getItem('token'))) {
next() // 正常跳转页面
} else {
let query = { returnUrl: to.path };
next({
path: '/login',
query: query
/* 将跳转的路由地址作为参数带给登陆页,登录成功后跳转回该页面 */
})
}
} else { // 如果不需要权限校验,直接进入路由页面
next();
}
})
export default router;

@ -0,0 +1,70 @@
<template>
<div class="detail">
<div class="top">
<p>类型: {{info.categoryName}}</p>
<p>级别: {{info.levelName}}</p>
<p>文号版本: {{info.version}}</p>
<p>实施日期: {{info.implementationDate}}</p>
<p>状态: {{info.currentStatus == 1 ? '现行' : '废止'}}</p>
<p>内容介绍:</p>
</div>
<div class="content">
<div v-html="info.content" class="inner-html"></div>
</div>
</div>
</template>
<script>
export default {
name: "MyDtail",
data() {
//
return {
info: {
categoryName: '',
levelName: '',
version: '',
implementationDate: '',
currentStatus: '',
}
};
},
mounted() {
this.$https.post("/api/article/article-detail-by-id", { id: this.$route.query.id }).then(res => {
if (res && res.data && res.data.retcode) {
this.info = res.data.data
}
})
},
};
</script>
<style scoped>
.top {
padding: 10px;
font-size: 18px;
}
.top p {
margin: 0;
padding-bottom: 10px;
}
.content {
width: 100%;
overflow: hidden;
}
.inner-html {
padding: 10px;
max-width: 100%;
font-size: 18px;
}
.inner-html >>> p {
margin: 0;
}
.inner-html >>> table, .inner-html >>> th, .inner-html >>> td {
border: 1px solid black;
border-collapse: collapse;
}
</style>

@ -0,0 +1,120 @@
<template>
<div class="home">
<div class="search">
<a-input-search
placeholder="请输入关键字,标准名称,文号版本"
enter-button="查询"
size="large"
@search="onSearch"
/>
</div>
<div
v-infinite-scroll="handleInfiniteOnLoad"
class="demo-infinite-container"
:infinite-scroll-disabled="busy"
:infinite-scroll-distance="10"
>
<a-list :data-source="data">
<a-list-item slot="renderItem" slot-scope="item, index" @click="goDetail(item.id)">
<a-list-item-meta :description="item.version">
<h3 slot="title">{{ item.title }}</h3>
</a-list-item-meta>
<div>{{item.currentStatus === 1 ? '现行' : '废止'}}</div>
</a-list-item>
<div v-if="loading && !busy" class="demo-loading-container">
<a-spin />
</div>
</a-list>
</div>
</div>
</template>
<script>
import infiniteScroll from 'vue-infinite-scroll';
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "MyHome",
directives: { infiniteScroll },
data() {
//
return {
data: [],
loading: false,
busy: false,
total: 0,
params: {
pageNum: 1,
pageSize: 20,
param: ''
}
};
},
beforeMount() {
this.fetchData(res => {
this.data = res.list;
});
},
methods: {
goDetail(id) {
console.log(id)
this.$router.push('/detail?id='+id)
},
onSearch(value) {
this.params = {
pageNum: 1,
pageSize: 20,
param: value
};
this.data = []
this.loading = true;
this.fetchData(res => {
this.data = res.list;
this.loading = false;
});
},
fetchData(callback) {
this.$https.post("/api/article/article-list-by-condition", this.params).then(res => {
if (res && res.data && res.data.retcode) {
this.total = res.data.data.total || 0
callback(res.data.data);
}
})
},
handleInfiniteOnLoad() {
const data = this.data;
this.loading = true;
if (data.length > this.total) {
this.$message.warning('已加载完成');
this.busy = true;
this.loading = false;
return;
}
this.fetchData(res => {
this.data = data.concat(res.list);
this.loading = false;
});
},
},
// - 访DOM
mounted() { },
};
</script>
<style scoped>
.search {
padding: 10px;
}
.demo-infinite-container {
border: 1px solid #e8e8e8;
border-radius: 4px;
overflow: auto;
padding: 8px 24px;
height: calc(100vh - 100px);
}
.demo-loading-container {
position: absolute;
bottom: 40px;
width: 100%;
text-align: center;
}
</style>

@ -0,0 +1,89 @@
<template>
<div class="login-page">
<div class="login-container">
<h1>登录</h1>
<div class="form">
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
<a-form-item label="用户名">
<a-input
v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]"
/>
</a-form-item>
<a-form-item label="密码">
<a-input-password
v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]"
/>
</a-form-item>
<a-form-item :wrapper-col="{ span: 12 }">
<a-button type="primary" html-type="submit" block>
登录
</a-button>
</a-form-item>
</a-form>
</div>
</div>
</div>
</template>
<script>
import { message } from 'ant-design-vue';
export default {
data() {
return {
form: this.$form.createForm(this, { name: 'coordinated' }),
};
},
mounted() {
if (JSON.parse(sessionStorage.getItem("token"))) {
this.$router.replace({ path: "/" });
}
},
methods: {
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
this.$https.post("/api/login", {userNo: values.username, password: values.password}).then(res => {
if (res && res.data && res.data.retcode) {
sessionStorage.setItem("token", JSON.stringify(res.data.data));
if (this.$route.query.returnUrl) {
this.$router.push({ path: this.$route.query.returnUrl, query: this.$route.query });
} else {
this.$router.push({ path: "/" });
}
} else {
message.error(res.data.retmsg)
}
})
}
});
}
}
};
</script>
<style scoped>
.login-page {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
h1 {
margin-top: 0;
font-size: 22px;
}
</style>

@ -0,0 +1,13 @@
// const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
// transpileDependencies: true
// })
module.exports = {
publicPath: '/',
// 关闭打包生成map文件
productionSourceMap: false,
// 关闭ESLINT校验工具
lintOnSave: false,
css: {},
configureWebpack: config => { config.entry.app = ["@babel/polyfill", "./src/main.js"]; },
}
Loading…
Cancel
Save