前端改用vue3
This commit is contained in:
lulz1
parent
153ae31ea8
commit
b7951accd8
9
Makefile
9
Makefile
|
|
@ -1,9 +0,0 @@
|
|||
.PHONY: dist build
|
||||
install:
|
||||
@npm install
|
||||
|
||||
dev: install
|
||||
@npm run dev
|
||||
|
||||
build:
|
||||
@npm run build
|
||||
File diff suppressed because it is too large
Load Diff
54
package.json
54
package.json
|
|
@ -1,41 +1,29 @@
|
|||
{
|
||||
"name": "element-starter",
|
||||
"description": "A Vue.js project",
|
||||
"author": "yi.shyang@ele.me",
|
||||
"name": "element-plus-vite-starter",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --hot --env.dev",
|
||||
"build": "rimraf dist && webpack -p --progress --hide-modules"
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"generate": "vite-ssg build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "vue-tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@toast-ui/editor": "^3.2.2",
|
||||
"@toast-ui/vue-editor": "^3.2.3",
|
||||
"axios": "^0.24.0",
|
||||
"element-ui": "^2.3.4",
|
||||
"js-cookie": "^3.0.1",
|
||||
"vue": "^2.5.16",
|
||||
"vue-router": "^3.5.3",
|
||||
"vue-style-loader": "^4.1.3",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
"element-plus": "^2.6.2",
|
||||
"vue": "^3.4.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.6.0",
|
||||
"babel-core": "^6.24.1",
|
||||
"babel-loader": "^6.4.0",
|
||||
"babel-preset-vue-app": "^1.2.0",
|
||||
"css-loader": "^0.27.0",
|
||||
"file-loader": "^0.10.1",
|
||||
"html-webpack-plugin": "^2.24.1",
|
||||
"postcss-loader": "^1.3.3",
|
||||
"rimraf": "^2.5.4",
|
||||
"style-loader": "^0.13.2",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-template-compiler": "^2.5.16",
|
||||
"webpack": "^2.4.1",
|
||||
"webpack-dev-server": "^2.4.2"
|
||||
}
|
||||
"@iconify-json/ep": "^1.1.15",
|
||||
"@types/node": "^20.11.30",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"sass": "^1.72.0",
|
||||
"typescript": "^5.4.3",
|
||||
"unocss": "^0.58.6",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^5.2.5",
|
||||
"vite-ssg": "^0.23.6",
|
||||
"vue-tsc": "^2.0.7"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require('autoprefixer')()
|
||||
]
|
||||
}
|
||||
29
src/App.vue
29
src/App.vue
|
|
@ -1,22 +1,23 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<el-config-provider namespace="ep">
|
||||
<BaseHeader />
|
||||
<div class="flex main-container">
|
||||
<BaseSide />
|
||||
<div w="full" py="4">
|
||||
<Logos my="4" />
|
||||
<HelloWorld msg="Hello Vue 3 + Element Plus + Vite" />
|
||||
</div>
|
||||
</div>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Helvetica, sans-serif;
|
||||
text-align: center;
|
||||
color: var(--ep-text-color-primary);
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: calc(100vh - var(--ep-menu-item-height) - 3px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>element-starter</title>
|
||||
</head>
|
||||
|
||||
<body style="margin: 0px;">
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
15
src/main.js
15
src/main.js
|
|
@ -1,15 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import App from './App.vue'
|
||||
import store from './store'
|
||||
import router from './router/index.js'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router: router,
|
||||
store: store,
|
||||
render: h => h(App)
|
||||
})
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
import ViewLogin from '../views/login/index'
|
||||
import ViewRegister from '../views/register/index'
|
||||
import View404 from '../views/404'
|
||||
import ViewContainer from '../views/layout/container'
|
||||
import ViewList from '../views/list/index'
|
||||
import ViewDetail from '../views/detail/index'
|
||||
import ViewCreate from '../views/create/index'
|
||||
import ViewEdit from '../views/edit/index'
|
||||
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
/**
|
||||
* constantRoutes
|
||||
* a base page that does not have permission requirements
|
||||
* all roles can be accessed
|
||||
*/
|
||||
export const constantRoutes = [
|
||||
{
|
||||
path: '/login',
|
||||
component: ViewLogin,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
component: ViewRegister,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
component: View404,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/',
|
||||
component: ViewContainer,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: ViewList
|
||||
},
|
||||
{
|
||||
path: 'detail',
|
||||
component: ViewDetail
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
component: ViewCreate
|
||||
},
|
||||
{
|
||||
path: 'edit',
|
||||
component: ViewEdit
|
||||
}
|
||||
]
|
||||
},
|
||||
{ path: '*', redirect: '/404', hidden: true }
|
||||
]
|
||||
|
||||
const createRouter = () => new Router({
|
||||
routes: constantRoutes
|
||||
})
|
||||
|
||||
const router = createRouter()
|
||||
|
||||
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
|
||||
export function resetRouter() {
|
||||
const newRouter = createRouter()
|
||||
router.matcher = newRouter.matcher // reset router
|
||||
}
|
||||
|
||||
export default router
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
// 定义基础 URL
|
||||
const BASE_URL = '/';
|
||||
|
||||
// 通用的 fetch 请求封装函数
|
||||
async function request<T>(
|
||||
endpoint: string,
|
||||
method: string = 'GET',
|
||||
body?: any,
|
||||
headers: Record<string, string> = {}
|
||||
): Promise<T> {
|
||||
const options: RequestInit = {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...headers,
|
||||
},
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
};
|
||||
|
||||
const response = await fetch(`${BASE_URL}${endpoint}`, options);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
throw new Error(`API Error: ${response.status} ${errorText}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// 用户相关 API 封装
|
||||
export const userService = {
|
||||
login: (params: LoginParam) =>
|
||||
request<string>('/user/login', 'POST', params),
|
||||
|
||||
logout: () => request<string>('/user/logout', 'GET'),
|
||||
|
||||
register: (params: RegisterParam) =>
|
||||
request<string>('/user/register', 'POST', params),
|
||||
|
||||
verifyRegistration: (token: string) =>
|
||||
request<string>(`/user/register/verify?token=${token}`, 'GET'),
|
||||
};
|
||||
|
||||
// 问题相关 API 封装
|
||||
export const questionService = {
|
||||
create: (params: QuestionCreateParam) =>
|
||||
request<string>('/question/create', 'POST', params),
|
||||
|
||||
delete: (params: QuestionDeleteParam) =>
|
||||
request<string>('/question/delete', 'POST', params),
|
||||
|
||||
edit: (params: QuestionEditParam) =>
|
||||
request<string>('/question/edit', 'POST', params),
|
||||
|
||||
detail: (params: QuestionDetailParam) =>
|
||||
request<QuestionDTO>('/question/detail', 'POST', params),
|
||||
|
||||
list: (params: QuestionListParam) =>
|
||||
request<QuestionDTO[]>('/question/list', 'POST', params),
|
||||
};
|
||||
|
||||
// 回答相关 API 封装
|
||||
export const answerService = {
|
||||
create: (params: AnswerCreateParam) =>
|
||||
request<string>('/answer/create', 'POST', params),
|
||||
|
||||
delete: (params: AnswerDeleteParam) =>
|
||||
request<string>('/answer/delete', 'POST', params),
|
||||
};
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
// 用户相关类型
|
||||
export interface LoginParam {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface RegisterParam {
|
||||
username: string;
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface UserDTO {
|
||||
id: number;
|
||||
user_name: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
// 问题相关类型
|
||||
export interface QuestionDTO {
|
||||
id: number;
|
||||
title: string;
|
||||
context: string;
|
||||
answer_num: number;
|
||||
answers: AnswerDTO[];
|
||||
author: UserDTO;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface QuestionCreateParam {
|
||||
title: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface QuestionDeleteParam {
|
||||
questionId: number;
|
||||
}
|
||||
|
||||
export interface QuestionEditParam {
|
||||
id: number;
|
||||
title: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface QuestionDetailParam {
|
||||
questionId: number;
|
||||
}
|
||||
|
||||
export interface QuestionListParam {
|
||||
start: number;
|
||||
size: number;
|
||||
}
|
||||
|
||||
// 回答相关类型
|
||||
export interface AnswerDTO {
|
||||
id: number;
|
||||
content: string;
|
||||
author: UserDTO;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface AnswerCreateParam {
|
||||
questionId: number;
|
||||
context: string;
|
||||
}
|
||||
|
||||
export interface AnswerDeleteParam {
|
||||
answerId: number;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
const getters = {
|
||||
sidebar: state => state.app.sidebar,
|
||||
device: state => state.app.device,
|
||||
size: state => state.app.size,
|
||||
token: state => state.user.token,
|
||||
avatar: state => state.user.avatar,
|
||||
name: state => state.user.name,
|
||||
visitedViews: state => state.tagsView.visitedViews,
|
||||
cachedViews: state => state.tagsView.cachedViews,
|
||||
}
|
||||
export default getters
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import getters from './getters'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
// https://webpack.js.org/guides/dependency-management/#requirecontext
|
||||
const modulesFiles = require.context('./modules', true, /\.js$/)
|
||||
|
||||
// you do not need `import app from './modules/app'`
|
||||
// it will auto require all vuex module from modules file
|
||||
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
|
||||
// set './app.js' => 'app'
|
||||
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
|
||||
const value = modulesFiles(modulePath)
|
||||
modules[moduleName] = value.default
|
||||
return modules
|
||||
}, {})
|
||||
|
||||
const store = new Vuex.Store({
|
||||
modules,
|
||||
getters
|
||||
})
|
||||
|
||||
export default store
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||
import { resetRouter } from '@/router'
|
||||
import request from "../../utils/request";
|
||||
|
||||
const getDefaultState = () => {
|
||||
return {
|
||||
token: getToken(),
|
||||
name: 'jianfengye',
|
||||
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
|
||||
}
|
||||
}
|
||||
|
||||
const state = getDefaultState()
|
||||
|
||||
const mutations = {
|
||||
RESET_STATE: (state) => {
|
||||
Object.assign(state, getDefaultState())
|
||||
},
|
||||
SET_TOKEN: (state, token) => {
|
||||
state.token = token
|
||||
},
|
||||
SET_NAME: (state, name) => {
|
||||
state.name = name
|
||||
},
|
||||
SET_AVATAR: (state, avatar) => {
|
||||
state.avatar = avatar
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
// user login
|
||||
login({ commit }, userInfo) {
|
||||
const { username, password } = userInfo
|
||||
return new Promise((resolve, reject) => {
|
||||
request.post("/user/login",{ username: username.trim(), password: password }).then(response => {
|
||||
const token = response.data
|
||||
commit('SET_TOKEN', token)
|
||||
setToken(token)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// user logout
|
||||
logout({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request("/user/logout", state.token).then(() => {
|
||||
removeToken() // must remove token first
|
||||
resetRouter()
|
||||
commit('RESET_STATE')
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// remove token
|
||||
resetToken({ commit }) {
|
||||
return new Promise(resolve => {
|
||||
removeToken() // must remove token first
|
||||
commit('RESET_STATE')
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import Cookies from 'js-cookie'
|
||||
|
||||
const TokenKey = 'hade_bbs'
|
||||
|
||||
export function getToken() {
|
||||
return Cookies.get(TokenKey)
|
||||
}
|
||||
|
||||
export function setToken(token) {
|
||||
return Cookies.set(TokenKey, token)
|
||||
}
|
||||
|
||||
export function removeToken() {
|
||||
return Cookies.remove(TokenKey)
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
import axios from 'axios'
|
||||
import {Message} from 'element-ui'
|
||||
|
||||
|
||||
// 创建一个axios
|
||||
const service = axios.create({
|
||||
withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 10000 // request timeout
|
||||
})
|
||||
|
||||
// 请求的配置
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
// 如果request 有错误，打印信息
|
||||
console.log(error) // for debug
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// response中统一做处理
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
// Any status code that lie within the range of 2xx cause this function to trigger
|
||||
// Do something with result data
|
||||
// 处理 2xx 范围内的响应
|
||||
const res = response.data;
|
||||
|
||||
// 判断后端返回的 code 是否为 0（表示失败）
|
||||
if (res.code !== 1) {
|
||||
Message({
|
||||
message: res.message || '网络开小差啦！',
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
});
|
||||
|
||||
// 返回一个拒绝的 Promise，以便调用方处理错误
|
||||
console.log("执行到第一个 reject ")
|
||||
console.log(res)
|
||||
return Promise.reject(new Error(res.message || '网络开小差啦！'));
|
||||
} else {
|
||||
// 正常返回数据
|
||||
console.log("执行到下面的 else ")
|
||||
console.log(res)
|
||||
return res;
|
||||
}
|
||||
},
|
||||
error => {
|
||||
// Any status codes that falls outside the range of 2xx cause this function to trigger
|
||||
// Do something with result error
|
||||
console.log('err: ' + error) // for debug
|
||||
const message = (error.response && error.response.data && error.response.data.message)
|
||||
|| '网络开小差啦！';
|
||||
// 打印Message消息
|
||||
Message({
|
||||
message,
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
console.log("执行到下面的 error了 ")
|
||||
console.log(message)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default service
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<script>
|
||||
export default {
|
||||
name: "notfound",
|
||||
data() {
|
||||
return {
|
||||
model: {
|
||||
username: "",
|
||||
password: ""
|
||||
},
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="notfound">
|
||||
<el-card>
|
||||
<h2>页面找不到了</h2>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.notfound {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 240px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<template>
|
||||
<el-row type="flex" justify="center" align="middle">
|
||||
<el-col :span="8">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<el-form ref="form" :model="question" >
|
||||
<el-form-item >
|
||||
<el-input v-model="question.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<editor :options="editorOptions"
|
||||
height="500px"
|
||||
initialEditType="wysiwyg"
|
||||
previewStyle="vertical"
|
||||
ref="toastuiEditor"
|
||||
:initialValue="content"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="postQuestion">立即提问</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@toast-ui/editor/dist/toastui-editor.css';
|
||||
|
||||
import { Editor } from '@toast-ui/vue-editor';
|
||||
import request from "../../utils/request";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
editor: Editor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
question: {
|
||||
title: '',
|
||||
content: ''
|
||||
},
|
||||
content: '<p>123213213123</p>',
|
||||
editorOptions: {
|
||||
minHeight: '200px',
|
||||
language: 'en-US',
|
||||
useCommandShortcut: true,
|
||||
usageStatistics: true,
|
||||
hideModeSwitch: true,
|
||||
toolbarItems: [
|
||||
['heading', 'bold', 'italic', 'strike'],
|
||||
['hr', 'quote'],
|
||||
['ul', 'ol', 'task', 'indent', 'outdent'],
|
||||
['table', 'image', 'link'],
|
||||
['code', 'codeblock'],
|
||||
['scrollSync'],
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
postQuestion: function() {
|
||||
debugger
|
||||
let html = this.$refs.toastuiEditor.$data.editor.getHTML()
|
||||
this.question.content = html;
|
||||
const that = this
|
||||
request({
|
||||
method: 'POST',
|
||||
url: "/question/create",
|
||||
data: this.question,
|
||||
}).then(function () {
|
||||
that.$router.push({ path: '/' })
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
/*width: 480px;*/
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,176 +0,0 @@
|
|||
<template>
|
||||
<el-row type="flex" justify="center" align="middle">
|
||||
<el-col :span="8">
|
||||
<el-card v-if="question" class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ question.title }} <span class="header_name" style="margin-right: 5px; float: right;"> <span
|
||||
@click="gotoQuestionEdit">修改</span> ｜ <span @click="gotoDeleteQuestion">删除</span> </span> </span>
|
||||
</div>
|
||||
<div>
|
||||
<viewer ref="questionViewer" :options="questionViewerOptions" :initialValue="question.context"/>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-divider content-position="left">所有回答</el-divider>
|
||||
<el-card v-for="answer in question.answers" style="margin-top: 5px; " class="box-card" shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ answer.author.user_name }} | {{ answer.created_at | formatDate }} <span class="header_name"
|
||||
style="margin-right: 5px; float: right;"
|
||||
@click="gotoDeleteAnswer(answer.id)">删除</span></span>
|
||||
</div>
|
||||
<div>
|
||||
<viewer ref="answerViewer" :initialValue="answer.content"/>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-divider content-position="left">我来回答</el-divider>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<el-form ref="form" :model="question">
|
||||
<el-form-item>
|
||||
<editor :options="editorOptions"
|
||||
:initialValue="answerContext"
|
||||
height="200px"
|
||||
initialEditType="markdown"
|
||||
ref="toastuiEditor"
|
||||
previewStyle="vertical"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="postAnswer">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
|
||||
import '@toast-ui/editor/dist/toastui-editor.css';
|
||||
|
||||
import {Editor, Viewer} from '@toast-ui/vue-editor';
|
||||
import request from "../../utils/request";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
viewer: Viewer,
|
||||
editor: Editor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
question: null,
|
||||
questionViewerOptions: {
|
||||
usageStatistics: true,
|
||||
},
|
||||
answerContext: '',
|
||||
editorOptions: {
|
||||
minHeight: '200px',
|
||||
language: 'en-US',
|
||||
useCommandShortcut: true,
|
||||
usageStatistics: true,
|
||||
hideModeSwitch: false,
|
||||
toolbarItems: [
|
||||
['heading', 'bold', 'italic', 'strike'],
|
||||
['hr', 'quote'],
|
||||
['ul', 'ol', 'task', 'indent', 'outdent'],
|
||||
['table', 'link'],
|
||||
['code', 'codeblock'],
|
||||
['scrollSync'],
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.id) {
|
||||
let id = parseInt(this.$route.query.id)
|
||||
this.getDetail(id);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail: function (id) {
|
||||
const that = this
|
||||
this.id = id
|
||||
request({
|
||||
url: "/question/detail",
|
||||
method: 'POST',
|
||||
params: {
|
||||
"id": id
|
||||
}
|
||||
}).then(function (response) {
|
||||
that.question = response.data;
|
||||
})
|
||||
},
|
||||
postAnswer: function () {
|
||||
let html = this.$refs.toastuiEditor.$data.editor.getHTML()
|
||||
this.answerContext = html
|
||||
const that = this
|
||||
request({
|
||||
method: 'POST',
|
||||
url: "/answer/create",
|
||||
data: {
|
||||
"question_id": that.id,
|
||||
"context": that.answerContext,
|
||||
},
|
||||
}).then(function () {
|
||||
that.$router.go(0)
|
||||
})
|
||||
},
|
||||
gotoQuestionEdit: function () {
|
||||
this.$router.push({path: '/edit', query: {'id': this.id}})
|
||||
},
|
||||
gotoDeleteQuestion: function () {
|
||||
const that = this
|
||||
request({
|
||||
method: 'POST',
|
||||
url: "/question/delete",
|
||||
data: {
|
||||
"questionId": that.id,
|
||||
}
|
||||
}).then(function () {
|
||||
that.$router.go(0)
|
||||
})
|
||||
},
|
||||
gotoDeleteAnswer: function (id) {
|
||||
const that = this
|
||||
request({
|
||||
method: 'POST',
|
||||
url: "/answer/delete",
|
||||
data: {
|
||||
"answerId": id,
|
||||
},
|
||||
}).then(function () {
|
||||
that.$router.go(0)
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
/*width: 480px;*/
|
||||
}
|
||||
|
||||
.header_name {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
margin: 0 15px 0 0;
|
||||
line-height: 34px;
|
||||
background-color: transparent;
|
||||
color: #486e9b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header_name > a {
|
||||
background-color: transparent;
|
||||
color: #486e9b;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
<template>
|
||||
<el-row type="flex" justify="center" align="middle">
|
||||
<el-col :span="8">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<el-form ref="form" :model="question" label-width="80px">
|
||||
<el-form-item label="问题标题">
|
||||
<el-input v-model="question.title">{{question.title}}</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="问题描述" v-if="question.context">
|
||||
<editor :options="editorOptions"
|
||||
:initialValue="question.context"
|
||||
height="500px"
|
||||
initialEditType="wysiwyg"
|
||||
previewStyle="vertical" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">更新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@toast-ui/editor/dist/toastui-editor.css';
|
||||
|
||||
import { Editor } from '@toast-ui/vue-editor';
|
||||
import request from "../../utils/request";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
editor: Editor
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.id) {
|
||||
let id = parseInt(this.$route.query.id)
|
||||
this.getDetail(id);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
question: {
|
||||
title: '',
|
||||
context: ''
|
||||
},
|
||||
editorOptions: {
|
||||
minHeight: '200px',
|
||||
language: 'en-US',
|
||||
useCommandShortcut: true,
|
||||
usageStatistics: true,
|
||||
hideModeSwitch: true,
|
||||
toolbarItems: [
|
||||
['heading', 'bold', 'italic', 'strike'],
|
||||
['hr', 'quote'],
|
||||
['ul', 'ol', 'task', 'indent', 'outdent'],
|
||||
['table', 'image', 'link'],
|
||||
['code', 'codeblock'],
|
||||
['scrollSync'],
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail: function (id) {
|
||||
const that = this
|
||||
this.id = id
|
||||
request({
|
||||
url: "/question/detail",
|
||||
method: 'POST',
|
||||
data: {
|
||||
"questionId": id
|
||||
}
|
||||
}).then(function (response) {
|
||||
that.question = response.data;
|
||||
})
|
||||
},
|
||||
onSubmit: function () {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
/*width: 480px;*/
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<script>
|
||||
import BBSHeader from './header'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'bbs-header': BBSHeader
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<bbs-header></bbs-header>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<router-view></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-row type="flex" justify="center" align="middle">
|
||||
<el-col :span="8">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="hade_title"><a href="/" id="home-link" title="hadecast">hadecast</a></div>
|
||||
</el-col>
|
||||
<el-col class="" :span="8" :offset="8">
|
||||
<div class="header_name">
|
||||
<router-link class="to-link" :to="{path: '/create'}"><a title="hadecast">我要提问</a></router-link>
|
||||
| jianfengye | <a href="/user/logout" title="hadecast">登出</a></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hade_title {
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
margin: 0 15px 0 0;
|
||||
line-height: 34px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.header_name {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
margin: 0 15px 0 0;
|
||||
line-height: 34px;
|
||||
padding-top: 10px;
|
||||
padding-top: 10px;
|
||||
background-color: transparent;
|
||||
color: #486e9b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header_name > a {
|
||||
background-color: transparent;
|
||||
color: #486e9b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hade_title > a {
|
||||
background-color: transparent;
|
||||
color: #486e9b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,171 +0,0 @@
|
|||
<template>
|
||||
<el-row type="flex" justify="center" align="middle">
|
||||
<el-col :span="8">
|
||||
<div class="infinite-list-wrapper" style="overflow:auto">
|
||||
<ul
|
||||
class="list"
|
||||
v-infinite-scroll="load"
|
||||
infinite-scroll-disabled="disabled">
|
||||
<el-card v-for="question in questions" class="box-card" shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{question.title}}</span>
|
||||
</div>
|
||||
<div class="text item">
|
||||
{{question.context}}
|
||||
</div>
|
||||
<div class="bottom clearfix">
|
||||
<time class="time">{{question.created_at}} ｜ {{question.author.user_name}} | {{question.answer_num}} 回答</time>
|
||||
<el-button type="text" class="button" @click="gotoDetail(question.id)">去看看</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</ul>
|
||||
<p v-if="loading" class="loading_tips">加载中...</p>
|
||||
<p v-if="disabled" class="loading_tips">没有更多了</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from "../../utils/request";
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
count: 10,
|
||||
start: 0,
|
||||
size: 10,
|
||||
questions: [],
|
||||
loading: false,
|
||||
noMore: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getQuestions();
|
||||
},
|
||||
computed: {
|
||||
disabled () {
|
||||
return this.loading || this.noMore
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load () {
|
||||
if (this.noMore === true) {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
this.getQuestions()
|
||||
}, 2000)
|
||||
},
|
||||
getQuestions() {
|
||||
const that = this;
|
||||
request({
|
||||
url: '/question/list',
|
||||
method: 'POST',
|
||||
data: {
|
||||
start: this.start,
|
||||
size: this.size,
|
||||
}
|
||||
}).then(function (response) {
|
||||
const questions = response.data
|
||||
if (questions === null || questions.length === 0) {
|
||||
that.noMore = true
|
||||
}
|
||||
that.questions = that.questions.concat(questions)
|
||||
that.start = that.start + questions.length
|
||||
})
|
||||
this.loading = false;
|
||||
},
|
||||
gotoDetail(id) {
|
||||
// go to detail page
|
||||
this.$router.push({path: '/detail', query:{'id': id}})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.loading_tips {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
margin-top: 10px;
|
||||
/*height: 240px;*/
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 18px;
|
||||
opacity: 0.75;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
<script>
|
||||
|
||||
export default {
|
||||
name: "login",
|
||||
data() {
|
||||
return {
|
||||
model: {
|
||||
username: "",
|
||||
password: ""
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleLogin() {
|
||||
this.$store.dispatch('user/login', this.model).then(() => {
|
||||
this.$router.push({path: this.redirect || '/'})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-card>
|
||||
<h2>登录</h2>
|
||||
<el-form
|
||||
class="login-form"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="model.username" placeholder="用户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
placeholder="密码"
|
||||
type="password"
|
||||
v-model="model.password"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col class="register">
|
||||
还没有账号？请点击
|
||||
<router-link class="to-link" :to="{path: '/register'}">
|
||||
<el-link type="primary">注册</el-link>
|
||||
</router-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="login-button"
|
||||
type="primary"
|
||||
native-type="submit"
|
||||
@click="handleLogin"
|
||||
block
|
||||
>登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.to-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.register {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
<script setup>
|
||||
import request from '../../utils/request'
|
||||
|
||||
export default {
|
||||
name: "register",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: '',
|
||||
password: '',
|
||||
email: '',
|
||||
repassword: ''
|
||||
},
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm: function(e) {
|
||||
if (this.form.repassword !== this.form.password) {
|
||||
this.$message.error("两次输入密码不一致");
|
||||
return;
|
||||
}
|
||||
const that = this;
|
||||
request({
|
||||
url: '/user/register',
|
||||
method: 'post',
|
||||
data: this.form
|
||||
}).then(function (response) {
|
||||
debugger
|
||||
const msg = response.data
|
||||
that.$message.success(msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="register">
|
||||
<el-card>
|
||||
<h2>注册</h2>
|
||||
<el-form v-model="form" class="register-form">
|
||||
<el-form-item >
|
||||
<el-input v-model="form.username" placeholder="用户名" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-input v-model="form.email" placeholder="邮箱"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-input
|
||||
placeholder="密码"
|
||||
type="password"
|
||||
v-model="form.password"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-input
|
||||
placeholder="确认密码"
|
||||
type="password"
|
||||
v-model="form.repassword"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
:loading="loading"
|
||||
class="login-button"
|
||||
type="primary"
|
||||
native-type="submit"
|
||||
@click="submitForm"
|
||||
block
|
||||
>注册</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.register {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.register-form {
|
||||
width: 390px;
|
||||
}
|
||||
.forgot-password {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.send_verify_code{
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
const resolve = require('path').resolve
|
||||
const webpack = require('webpack')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const url = require('url')
|
||||
const publicPath = ''
|
||||
|
||||
module.exports = (options = {}) => ({
|
||||
entry: {
|
||||
vendor: './src/vendor',
|
||||
index: './src/main.js'
|
||||
},
|
||||
output: {
|
||||
path: resolve(__dirname, 'dist'),
|
||||
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
|
||||
chunkFilename: '[id].js?[chunkhash]',
|
||||
publicPath: options.dev ? '/assets/' : publicPath
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.vue$/,
|
||||
use: ['vue-loader']
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: ['babel-loader'],
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader', 'postcss-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
|
||||
use: [{
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
names: ['vendor', 'manifest']
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'src/index.html'
|
||||
})
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src')
|
||||
},
|
||||
extensions: ['.js', '.vue', '.json', '.css']
|
||||
},
|
||||
devServer: {
|
||||
host: '127.0.0.1',
|
||||
port: 8890,
|
||||
proxy: {
|
||||
'/api/': {
|
||||
target: 'http://127.0.0.1:8890',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api': ''
|
||||
}
|
||||
}
|
||||
},
|
||||
historyApiFallback: {
|
||||
index: url.parse(options.dev ? '/assets/' : publicPath).pathname
|
||||
}
|
||||
},
|
||||
devtool: options.dev ? '#eval-source-map' : '#source-map'
|
||||
})
|
||||
Loading…
Reference in New Issue