3 |
5 |
6 |
16 |
--------------------------------------------------------------------------------
/src/m/container/index.js:
--------------------------------------------------------------------------------
1 | import MContainer from './container'
2 | import MRow from './row'
3 | import Mcol from './col'
4 |
5 |
6 | MContainer.install = function (Vue) {
7 | Vue.component(MContainer.name, MContainer)
8 | Vue.component(MRow.name, MRow)
9 | Vue.component(Mcol.name, Mcol)
10 | }
11 |
12 | export default MContainer
13 |
--------------------------------------------------------------------------------
/src/assets/font-awesome-4.7.0/HELP-US-OUT.txt:
--------------------------------------------------------------------------------
1 | I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
2 | Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
3 | comprehensive icon sets or copy and paste your own.
4 |
5 | Please. Check it out.
6 |
7 | -Dave Gandy
8 |
--------------------------------------------------------------------------------
/src/m/container/container.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
11 |
23 |
--------------------------------------------------------------------------------
/src/m/input/README.md:
--------------------------------------------------------------------------------
1 | ## Input
2 |
3 | Input 输入框。
4 |
5 | ```html
6 |
3 |
12 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/test/e2e/custom-assertions/elementCount.js:
--------------------------------------------------------------------------------
1 | // A custom Nightwatch assertion.
2 | // The assertion name is the filename.
3 | // Example usage:
4 | //
5 | // browser.assert.elementCount(selector, count)
6 | //
7 | // For more information on custom assertions see:
8 | // http://nightwatchjs.org/guide#writing-custom-assertions
9 |
10 | exports.assertion = function (selector, count) {
11 | this.message = 'Testing if element <' + selector + '> has count: ' + count
12 | this.expected = count
13 | this.pass = function (val) {
14 | return val === this.expected
15 | }
16 | this.value = function (res) {
17 | return res.value
18 | }
19 | this.command = function (cb) {
20 | var self = this
21 | return this.api.execute(function (selector) {
22 | return document.querySelectorAll(selector).length
23 | }, [selector], function (res) {
24 | cb.call(self, res)
25 | })
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/store/modules/editMovie.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | const state = {
3 | // 修改影片信息 返回给前端状态码 1为成功 -1 为失败
4 | editStatus:null
5 | };
6 | const mutations = {
7 | EDIT_Movie_STUTAS(state,payload){
8 | state.editStatus=payload;
9 | },
10 | };
11 |
12 | const actions = {
13 | editMovie({commit},params){
14 | console.log(params);
15 | axios.get("/api/movie/editMovie",{
16 | params:{
17 | id:params.id,
18 | form:params.form
19 | }
20 | })
21 | .then(res=>{
22 | let payload = res.code;
23 | commit("EDIT_Movie_STUTAS",payload)
24 | })
25 | .catch(function (error) {
26 | console.log(error);
27 | });
28 | },
29 | };
30 | const getters = {
31 | // 获取添加状态1或者0
32 | editMovieStatus:state => {
33 | return state.editStatus
34 | },
35 | }
36 | export default{
37 | state,
38 | mutations,
39 | actions,
40 | getters
41 | }
--------------------------------------------------------------------------------
/src/components/app-footer.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
20 |
37 |
--------------------------------------------------------------------------------
/src/store/modules/count.js:
--------------------------------------------------------------------------------
1 | // 计算当前所有的用户数 和 所有的影片数
2 | import axios from 'axios'
3 | const state = {
4 | movieNum:{
5 | length:''
6 | },
7 | memberNum:{
8 | length:''
9 | }
10 | };
11 | const mutations = {
12 | GET_MOVIE_NUM(state,payload){
13 | state.movieNum=payload;
14 | },
15 | GET_MEMBER_NUM(state,payload){
16 | state.memberNum=payload;
17 | }
18 | };
19 |
20 | const actions = {
21 | getMemNum({commit},params){
22 | axios.get("/api/user/getUserCount")
23 | .then(res=>{
24 | let payload = res;
25 | // console.log(res);
26 | commit("GET_MEMBER_NUM",payload)
27 | })
28 | .catch(function (error) {
29 | console.log(error);
30 | });
31 | }
32 | };
33 | const getters = {
34 | getMemNum:state => {
35 | return state.memberNum
36 | },
37 | getMovieNum:state => {
38 | return state.movieNum
39 | },
40 | }
41 | export default{
42 | state,
43 | mutations,
44 | actions,
45 | getters
46 | }
--------------------------------------------------------------------------------
/src/store/modules/addMovie.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | const state = {
3 | // 添加影片信息 返回给前端状态码 1为成功 -1 为失败
4 | addStatus:null
5 | };
6 | const mutations = {
7 | ADD_Movie(state,payload){
8 | state.addStatus=payload;
9 | },
10 | };
11 |
12 | const actions = {
13 | addMovie({commit},params){
14 | if(params.form.status == '完结'){
15 | params.form.status = 1
16 | }else{
17 | params.form.status = 0
18 | }
19 | axios.get("/api/movie/addMovie",{
20 | params:{
21 | form:params.form
22 | }
23 | })
24 | .then(res=>{
25 | let payload = res;
26 | console.log(res);
27 | commit("ADD_Movie",payload)
28 | })
29 | .catch(function (error) {
30 | console.log(error);
31 | });
32 | },
33 | };
34 | const getters = {
35 | // 获取添加状态1或者0
36 | addStatus:state => {
37 | return state.addStatus
38 | },
39 | }
40 | export default{
41 | state,
42 | mutations,
43 | actions,
44 | getters
45 | }
--------------------------------------------------------------------------------
/src/m/checkbox/README.md:
--------------------------------------------------------------------------------
1 | ## Checkbox
2 |
3 | 多选框
4 |
5 | ```html
6 |
4 |
6 | 首页
7 | Loading 加载图标
8 |
9 |
10 |
11 | Loading 加载图标
5 |
3 |
5 |
6 |
11 |
41 |
--------------------------------------------------------------------------------
/src/m/switch/switch.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
48 |
51 |
52 |
--------------------------------------------------------------------------------
/test/e2e/nightwatch.conf.js:
--------------------------------------------------------------------------------
1 | require('babel-register')
2 | var config = require('../../config')
3 |
4 | // http://nightwatchjs.org/gettingstarted#settings-file
5 | module.exports = {
6 | src_folders: ['test/e2e/specs'],
7 | output_folder: 'test/e2e/reports',
8 | custom_assertions_path: ['test/e2e/custom-assertions'],
9 |
10 | selenium: {
11 | start_process: true,
12 | server_path: require('selenium-server').path,
13 | host: '127.0.0.1',
14 | port: 4444,
15 | cli_args: {
16 | 'webdriver.chrome.driver': require('chromedriver').path
17 | }
18 | },
19 |
20 | test_settings: {
21 | default: {
22 | selenium_port: 4444,
23 | selenium_host: 'localhost',
24 | silent: true,
25 | globals: {
26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
27 | }
28 | },
29 |
30 | chrome: {
31 | desiredCapabilities: {
32 | browserName: 'chrome',
33 | javascriptEnabled: true,
34 | acceptSslCerts: true
35 | }
36 | },
37 |
38 | firefox: {
39 | desiredCapabilities: {
40 | browserName: 'firefox',
41 | javascriptEnabled: true,
42 | acceptSslCerts: true
43 | }
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/m/keyboard/pagination.js:
--------------------------------------------------------------------------------
1 | function Pagination (total, len) {
2 | // 总条目数
3 | this.total = Math.abs(~~total)
4 | // 当前页
5 | this.currentPage = 1
6 | var l = Math.abs(~~len)
7 | len = l > this.total ? this.total : l
8 | // 每页显示条目个数
9 | this.pageSize = len || 10
10 | // 总页数
11 | this.pageCount = Math.ceil(~~Math.abs(this.total) / ~~Math.abs(this.pageSize))
12 | }
13 | // 指定页数据
14 | Pagination.prototype.page = function (n) {
15 | var page = Math.abs(~~n) || this.currentPage
16 | if (page > this.pageCount) {
17 | // 防止出现当前页为零情况
18 | this.currentPage = this.pageCount || 1
19 | } else {
20 | this.currentPage = page
21 | }
22 | // console.log(this.currentPage)
23 | var index1 = (this.currentPage > 0 ? this.currentPage - 1 : 0) * this.pageSize
24 | var index2 = this.currentPage * this.pageSize
25 | index2 = index2 > this.total ? this.total : index2
26 | // slice(index1, index2) 实际arr[index1] ~ arr[index2-1]
27 | return [index1, index2]
28 | }
29 |
30 | Pagination.prototype.slice = function (arr, n) {
31 | return arr.slice.apply(arr, this.page(n))
32 | }
33 |
34 | Pagination.prototype.sql = function (n) {
35 | var pages = this.page(n)
36 | return {
37 | offset: pages[0],
38 | limit: this.pageSize
39 | }
40 | }
41 |
42 | export default Pagination
43 |
--------------------------------------------------------------------------------
/src/pages/about.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
17 |
52 |
--------------------------------------------------------------------------------
/src/m/dropdown/dropdown-item.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 | 
5 |
3 |
11 |
12 |
54 |
--------------------------------------------------------------------------------
/src/pages/500.vue:
--------------------------------------------------------------------------------
1 |
2 | 404
4 |Page Not Found
5 |
6 | 主页
7 | 返回
8 |
9 | @lanyue 版权所有
10 |
3 |
11 |
12 |
--------------------------------------------------------------------------------
/src/components/vmenu/chunk.vue:
--------------------------------------------------------------------------------
1 |
2 | 500
4 |Internal Server Error
5 |
6 | 主页
7 | 返回
8 |
9 | @lanyue 版权所有
10 |
3 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/store/modules/movie.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | const state = {
3 | movie:[],
4 | movieNum:null,
5 | delStatus:{}
6 | };
7 | const mutations = {
8 | GET_ALL_MOVIE(state,payload){
9 | state.movie=payload;
10 | },
11 | DEL_MOVIE(state,payload){
12 | state.delStatus=payload;
13 | },
14 | GET_MOVIE_NUM(state,payload){
15 | state.movieNum = payload;
16 | }
17 | };
18 |
19 | const actions = {
20 | getMovieNum({commit},params){
21 | axios.get("/api/movie/getMovieCount")
22 | .then(res=>{
23 | let payload = res.length;
24 | commit("GET_MOVIE_NUM",payload)
25 | })
26 | .catch(function (error) {
27 | console.log(error);
28 | });
29 | },
30 | getAllMovie({commit},params){
31 | axios.get("/api/movie/getMovieAll",{
32 | params:{
33 | pageSize:params.pageSize,
34 | curPage:params.curPage,
35 | }
36 | })
37 | .then(res=>{
38 | let payload = res.data;
39 | // console.log(payload);
40 | commit("GET_ALL_MOVIE",payload)
41 | })
42 | .catch(function (error) {
43 | console.log(error);
44 | });
45 | },
46 | delMovie({commit},params){
47 | // console.log(params);
48 | axios.get("/api/movie/delMovie",{
49 | params:{
50 | id:params.id,
51 | pageSize:params.pageSize,
52 | curPage:params.curPage,
53 | }
54 | })
55 | .then(res=>{
56 | let payload = res;
57 | // console.log(payload);
58 | commit("DEL_MOVIE",payload)
59 | })
60 | .catch(function (error) {
61 | console.log(error);
62 | });
63 | },
64 | };
65 | const getters = {
66 | // 获取按更新状态的数据
67 | movie:state => {
68 | return state.movie
69 | },
70 | // 用户总数
71 | movieNum:state => {
72 | return state.movieNum
73 | }
74 | }
75 | export default{
76 | state,
77 | mutations,
78 | actions,
79 | getters
80 | }
--------------------------------------------------------------------------------
/src/store/user.js:
--------------------------------------------------------------------------------
1 | // import Vue from 'vue'
2 |
3 | const state = {
4 | user: null,
5 | isLogin: false
6 | }
7 |
8 | const actions = {
9 | async login ({commit}, user) {
10 | commit('SET_DOING_LOGIN', true)
11 | // 模拟登陆
12 | var res = await new Promise((resolve, reject) => {
13 | user.id = 1
14 | user.nickName = '管理员'
15 | sessionStorage.setItem('user', JSON.stringify(user))
16 | setTimeout(() => {
17 | resolve({bool: true, user})
18 | }, 2000)
19 | })
20 | commit('SET_LOGIN_USER', user)
21 | commit('SET_LOGIN_TOKEN', '4eea90fd-2752-481d-ae67-c75f8641a94a')
22 | commit('SET_DOING_LOGIN', false)
23 | return res
24 | },
25 | async getLoginUser ({commit}) {
26 | // 模拟请求用户信息
27 | return new Promise((resolve, reject) => {
28 | setTimeout(() => {
29 | var user = sessionStorage.getItem('user')
30 | // console.log(JSON.parse(user))
31 | commit('SET_LOGIN_USER', JSON.parse(user))
32 | resolve({bool: true, user})
33 | }, 1000)
34 | })
35 | },
36 | // async logout ({commit}) {
37 | // // 模拟退出
38 | // return new Promise((resolve, reject) => {
39 | // setTimeout(() => {
40 | // sessionStorage.removeItem('user')
41 | // sessionStorage.removeItem('token')
42 | // commit('SET_LOGIN_USER', null)
43 | // resolve({bool: true})
44 | // }, 2000)
45 | // })
46 | // }
47 | }
48 |
49 | const mutations = {
50 | SET_DOING_LOGIN (state, isLogin) {
51 | state.isLogin = isLogin
52 | },
53 | SET_LOGIN_USER (state, user) {
54 | state.user = user
55 | },
56 | SET_LOGIN_TOKEN (state, token) {
57 | if (token) {
58 | sessionStorage.setItem('token', token)
59 | } else {
60 | sessionStorage.removeItem('token')
61 | }
62 | }
63 | }
64 |
65 | export default {
66 | state,
67 | actions,
68 | mutations
69 | }
70 |
--------------------------------------------------------------------------------
/src/m/dropdown/dropdown.less:
--------------------------------------------------------------------------------
1 | @dorpdown-name: m-dropdown;
2 |
3 |
4 | .@{dorpdown-name}{
5 | display: inline-block;
6 | position: relative;
7 | user-select: none;
8 |
9 | & .caret {
10 | display: inline-block;
11 | width: 0;
12 | height: 0;
13 | margin-left: 2px;
14 | vertical-align: middle;
15 | border-top: 4px solid;
16 | border-right: 4px solid transparent;
17 | border-left: 4px solid transparent;
18 | }
19 |
20 | & &-panel{
21 | display: none;
22 | min-width: 100%;
23 | margin: 0;
24 | padding: 5px 10px;
25 | list-style: none;
26 | position: absolute;
27 | z-index: 1000;
28 | background: #fff;
29 | border-radius: 3px;
30 | box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.09);
31 | border: solid 1px #D9D9D9;
32 | box-sizing: border-box;
33 | }
34 |
35 | &.left &-panel{
36 | left: 0;
37 | }
38 | &.right &-panel{
39 | right: 0;
40 | }
41 | &.bottom &-panel{
42 | bottom: 100%;
43 | }
44 | &.top &-panel{
45 | top: 0;
46 | }
47 | &.open{
48 | background-color: rgba(0,0,0,0.05);
49 | }
50 | &.open &-panel{
51 | display: block;
52 | }
53 | }
54 |
55 | .@{dorpdown-name}-item {
56 | min-width: 100px;
57 | height: 35px;
58 | margin-left: -10px;
59 | margin-right: -10px;
60 | list-style: none;
61 | line-height: 35px;
62 | padding: 0px 10px;
63 | color: #282C34;
64 | cursor: pointer;
65 | white-space: nowrap;
66 | box-sizing: border-box;
67 |
68 | & > a {
69 | display: inline-block;
70 | width: 100%;
71 | color: inherit;
72 | margin-left: -10px;
73 | margin-right: -10px;
74 | padding: 0 10px;
75 | }
76 | &.active,
77 | &:hover {
78 | background: #f3f3f5;
79 | font-weight: 500;
80 | color: #212529;
81 | }
82 | &.disabled{
83 | cursor: not-allowed;
84 | color: #b3b3b3;
85 | background: inherit;
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/src/m/dropdown/dropdown.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
7 |
8 | sticky
6 |
9 |
11 |
12 |
78 |
81 |
--------------------------------------------------------------------------------
/src/m/button/button.vue:
--------------------------------------------------------------------------------
1 |
2 |
19 |
20 |
84 |
87 |
--------------------------------------------------------------------------------
/src/m/loading/loading.vue:
--------------------------------------------------------------------------------
1 |
2 |
25 |
26 |
40 |
90 |
--------------------------------------------------------------------------------
/server/route.js:
--------------------------------------------------------------------------------
1 | var express = require('express')
2 | var router = express.Router();
3 | var api = require('./api')
4 | // 管理员登录
5 | router.get('/api/login', function(req, res, next) {
6 | return api.login(req, res, next);
7 | })
8 | // 获取验证码
9 | router.get('/api/getCaptcha', function(req, res, next) {
10 | return api.getCaptcha(req, res, next);
11 | })
12 | // 获取所有用户数量
13 | router.get('/api/user/getUserCount', function(req, res, next) {
14 | return api.getUserCount(req, res, next);
15 | })
16 | // 获取所有电影数量
17 | router.get('/api/movie/getMovieCount', function(req, res, next) {
18 | return api.getMovieCount(req, res, next);
19 | })
20 | // 获取所有用户信息
21 | router.get('/api/user/getUserAll', function(req, res, next) {
22 | return api.getUserAll(req, res, next);
23 | })
24 | // 获取所有电影信息
25 | router.get('/api/movie/getMovieAll', function(req, res, next) {
26 | return api.getMovieAll(req, res, next);
27 | })
28 | // 删除用户信息
29 | router.get('/api/user/delUser', function(req, res, next) {
30 | return api.delUser(req, res, next);
31 | })
32 | // 删除电影信息
33 | router.get('/api/movie/delMovie', function(req, res, next) {
34 | return api.delMovie(req, res, next);
35 | })
36 | // 添加影片信息
37 | router.get('/api/movie/addMovie', function(req, res, next) {
38 | return api.addMovie(req, res, next);
39 | })
40 | // 修改用户信息
41 | router.get('/api/user/editUser', function(req, res, next) {
42 | return api.editUser(req, res, next);
43 | })
44 | // 修改管理员信息
45 | router.get('/api/admin/editAdmin', function(req, res, next) {
46 | return api.editAdmin(req, res, next);
47 | })
48 | // 修改影片信息
49 | router.get('/api/movie/editMovie', function(req, res, next) {
50 | return api.editMovie(req, res, next);
51 | })
52 | // 获取管理员信息
53 | router.get('/api/admin/getAdminMsg', function(req, res, next) {
54 | return api.getAdminMsg(req, res, next);
55 | })
56 | // 搜索用户信息
57 | router.get('/api/searchUser', function(req, res, next) {
58 | return api.searchUser(req, res, next);
59 | })
60 | // 搜索影片信息
61 | router.get('/api/searchMovie', function(req, res, next) {
62 | return api.searchMovie(req, res, next);
63 | })
64 | module.exports = router;
--------------------------------------------------------------------------------
/src/store/modules/search.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | const state = {
3 | // 查询用户
4 | searchUser:{
5 | code:'2'
6 | },
7 | // 查询影片
8 | searchMovie:{
9 | code:'2'
10 | },
11 | };
12 | const mutations = {
13 | SEARCH_USER(state,payload){
14 | state.searchUser=payload;
15 | },
16 | SEARCH_MOVIE(state,payload){
17 | state.searchMovie=payload;
18 | },
19 | };
20 |
21 | const actions = {
22 | searchUser({commit},params){
23 | axios.get("/api/searchUser",{
24 | params:{
25 | name:params.name,
26 | }
27 | })
28 | .then(res=>{
29 | if(res.code == -1){
30 | let payload = res;
31 | commit("SEARCH_USER",payload)
32 | return
33 | }
34 | for(let i=0;i
3 |
11 |
12 |
48 |
49 |
50 |
77 |
--------------------------------------------------------------------------------
/src/store/modules/admin.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | const state = {
3 | // 获取管理员信息 修改管理员信息
4 | admin:'',
5 | editMsg:'',//修改结果 值为0或1
6 | editPwdStatus:false,//修改密码 值为0或1
7 | };
8 | const mutations = {
9 | GET_ADMIN_MSG(state,payload){
10 | state.admin=payload;
11 | },
12 | GET_EDIT_STATUS(state,payload){
13 | state.editMsg=payload;
14 | },
15 | GET_EDITPWD_STATUS(state,payload){
16 | state.editPwdStatus=payload;
17 | },
18 | CHANGE_EDITPWD_STATUS(state,payload){
19 | state.editPwdStatus=payload;
20 | },
21 | };
22 |
23 | const actions = {
24 | getAdminMsg({commit},params){
25 | axios.get("/api/admin/getAdminMsg")
26 | .then(res=>{
27 | let payload = res.data[0];
28 | commit("GET_ADMIN_MSG",payload)
29 | })
30 | .catch(function (error) {
31 | console.log(error);
32 | });
33 | },
34 | editMsg({commit},params){
35 | // 两个参数 一个是修改的key 一个是value
36 | axios.get("/api/admin/editAdmin",{
37 | params:{
38 | key:params.key,
39 | value:params.value
40 | }
41 | })
42 | .then(res=>{
43 | let payload = res;
44 | commit("GET_EDIT_STATUS",payload)
45 | })
46 | .catch(function (error) {
47 | console.log(error);
48 | });
49 | },
50 | editPwd({commit},params){
51 | // 传入新的密码
52 | axios.get("/api/admin/editAdmin",
53 | {
54 | params:{
55 | key: 'pwd',
56 | value:params.pwd
57 | }
58 | }
59 | )
60 | .then(res=>{
61 | let payload
62 | if(res.code == -1){
63 | payload = false
64 | }else{
65 | payload = true
66 | }
67 | commit("GET_EDITPWD_STATUS",payload)
68 | })
69 | .catch(function (error) {
70 | console.log(error);
71 | });
72 | },
73 | handlrPwdStatus({commit},params){
74 | let payload = false
75 | commit("CHANGE_EDITPWD_STATUS",payload)
76 | },
77 | };
78 | const getters = {
79 | admin:state => {
80 | return state.admin
81 | },
82 | editStatus:state =>{
83 | return state.editMsg
84 | },
85 | editPwdStatus:state =>{
86 | return state.editPwdStatus
87 | },
88 | }
89 | export default{
90 | state,
91 | mutations,
92 | actions,
93 | getters
94 | }
--------------------------------------------------------------------------------
/src/m/context-menu/index.js:
--------------------------------------------------------------------------------
1 | import ContextMenu from './context-menu'
2 |
3 | const ContextMenuPlugin = {}
4 |
5 | function contextMenuListener (dom, cb) {
6 | dom.addEventListener('contextmenu', function (e) {
7 | if (e.button === 2) {
8 | e.preventDefault()
9 | e.stopPropagation()
10 | cb && cb(e)
11 | return false
12 | }
13 | }, false)
14 | }
15 |
16 | ContextMenuPlugin.install = function (Vue) {
17 | // Vue.component(ContextMenu.name, ContextMenu)
18 | let Menu = Vue.extend(ContextMenu)
19 | let div = document.createElement('div')
20 | let menu = new Menu({
21 | el: div,
22 | data () {
23 | return {contextMenu: {}, hasIcon: false}
24 | }
25 | })
26 | Vue.directive('cmenu', {
27 | inserted: (el, binding) => {
28 | if (toString.call(binding.value) !== '[object Object]') {
29 | throw new Error('must be has an object parameters.')
30 | }
31 | let elem = binding.modifiers.fullscreen ? document.body : el
32 | menu.$data.contextMenu = binding.value
33 | menu.$data.hasIcon = !!binding.modifiers.hasIcon
34 | elem.appendChild(menu.$el)
35 | // 监听右键
36 | contextMenuListener(elem, (e) => {
37 | console.log(e.clientX, e.clientY, menu.$el.offsetWidth)
38 | let left = e.clientX
39 | let top = e.clientY
40 | let bodyWidth = document.body.offsetWidth
41 | if (bodyWidth - left < 280) {
42 | menu.nearRight = true
43 | if (bodyWidth - left < 140) {
44 | left = bodyWidth - 140
45 | }
46 | } else {
47 | menu.nearRight = false
48 | }
49 | if (menu.contextMenu && typeof menu.contextMenu.open === 'function') {
50 | let openResult = menu.contextMenu.open(e, menu)
51 | if (openResult !== undefined) {
52 | openResult && menu.setPosition(left + 'px', top + 'px')
53 | } else {
54 | menu.setPosition(left + 'px', top + 'px')
55 | }
56 | } else {
57 | menu.setPosition(left + 'px', top + 'px')
58 | }
59 | })
60 | // 菜单上禁止鼠标按键事件
61 | menu.$el.addEventListener('mousedown', function (e) {
62 | e.preventDefault()
63 | e.stopPropagation()
64 | return false
65 | })
66 | // 全局鼠标按键事件
67 | document.addEventListener('mousedown', function (e) {
68 | if (e.button !== 2) {
69 | menu.hide()
70 | }
71 | })
72 | }
73 | })
74 | }
75 |
76 | export default ContextMenuPlugin
77 |
--------------------------------------------------------------------------------
/src/m/input/input.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 | 首页
7 | Keyboard 虚拟键盘
8 |
9 |
10 | Keyboard 虚拟键盘
5 |
13 |
28 |
30 |
46 |
47 | Keyboard 虚拟键盘
14 |本页面代码可以在src/pages/c-keyboard.vue找到。
复合虚拟键盘
18 |中/英文键盘
23 |数字虚拟键盘
41 |
8 |
24 |
42 |
43 |
44 |
99 |
102 |
--------------------------------------------------------------------------------
/src/pages/search-user.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
36 |
37 |
56 |
85 |
--------------------------------------------------------------------------------
/src/store/modules/members.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | const state = {
3 | members:[],
4 | userNum:null,
5 | editStutas:'' //一个状态值 告诉前端是否修改成功
6 | };
7 | const mutations = {
8 | GET_ALL_MEMBERS(state,payload){
9 | state.members=payload;
10 | },
11 | DEL_MEMBERS(state,payload){
12 | state.members=payload;
13 | },
14 | GET_USER_NUM(state,payload){
15 | state.userNum = payload;
16 | },
17 | EDIT_USER(state,payload){
18 | state.editStutas = payload;
19 | },
20 | };
21 |
22 | const actions = {
23 | editUser({commit},params){
24 | console.log(params);
25 | axios.get("/api/user/editUser",{
26 | params:{
27 | id:params.id, //传入要修改得用户ID 和新值
28 | form:params.form
29 | }
30 | })
31 | .then(res=>{
32 | let payload = res;
33 | console.log('editUser:'+ payload);
34 | console.log(res);
35 | commit("EDIT_USER",payload)
36 | })
37 | .catch(function (error) {
38 | console.log(error);
39 | });
40 | },
41 | getUserNum({commit},params){
42 | axios.get("/api/user/getUserCount")
43 | .then(res=>{
44 | let payload = res.length;
45 | // console.log('getUserNum:'+ payload);
46 | commit("GET_USER_NUM",payload)
47 | })
48 | .catch(function (error) {
49 | console.log(error);
50 | });
51 | },
52 | getAllMembers({commit},params){
53 | axios.get("/api/user/getUserAll",{
54 | params:{
55 | root:params.root,
56 | pageSize:params.pageSize,
57 | curPage:params.curPage,
58 | }
59 | })
60 | .then(res=>{
61 | let payload = res;
62 | // console.log('getAllMembers');
63 | commit("GET_ALL_MEMBERS",payload)
64 | })
65 | .catch(function (error) {
66 | console.log(error);
67 | });
68 | },
69 | delMembers({commit},params){
70 | axios.get("/api/user/delUser",{
71 | params:{
72 | root:params.root,
73 | id:params.id,
74 | pageSize:params.pageSize,
75 | curPage:params.curPage,
76 | }
77 | })
78 | .then(res=>{
79 | let payload = res;
80 | // console.log('delMembers');
81 | commit("DEL_MEMBERS",payload)
82 | })
83 | .catch(function (error) {
84 | console.log(error);
85 | });
86 | }
87 | };
88 | const getters = {
89 | // 获取按更新状态的数据
90 | members:state => {
91 | return state.members
92 | },
93 | // 用户总数
94 | userNum:state => {
95 | return state.userNum
96 | },
97 | // 修改信息
98 | editStutas:state => {
99 | return state.editStutas
100 | }
101 | }
102 | export default{
103 | state,
104 | mutations,
105 | actions,
106 | getters
107 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
4 |
35 |
5 |
6 | 主页
7 | 用户信息搜索
8 |
9 |
10 |
11 |
34 |
12 | 用户搜索（暂只支持按用户名搜索,支持模糊搜索）:
13 |
14 |搜索
16 |
17 | 13 |
14 |
18 |
19 |
20 |
21 | ![]()
22 |
23 |
24 |
29 |
30 |
31 | 无数据
32 |
33 |
9 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | // Template version: 1.3.1
3 | // see http://vuejs-templates.github.io/webpack for documentation.
4 |
5 | const path = require('path')
6 |
7 | module.exports = {
8 | dev: {
9 |
10 | // Paths
11 | assetsSubDirectory: 'static',
12 | assetsPublicPath: '/',
13 | // 前端端口与后端端口相连 类似于解决跨域
14 | proxyTable: {
15 | '/api':{
16 | target: 'http://localhost:3030/api/',
17 | changeOrigin:true,
18 | pathWrite:{
19 | '^/api':''
20 | }
21 | }
22 | },
23 |
24 | // Various Dev Server settings
25 | host: '0.0.0.0', // can be overwritten by process.env.HOST
26 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
27 | autoOpenBrowser: false,
28 | errorOverlay: true,
29 | notifyOnErrors: true,
30 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
31 |
32 | // Use Eslint Loader?
33 | // If true, your code will be linted during bundling and
34 | // linting errors and warnings will be shown in the console.
35 | useEslint: true,
36 | // If true, eslint errors and warnings will also be shown in the error overlay
37 | // in the browser.
38 | showEslintErrorsInOverlay: false,
39 |
40 | /**
41 | * Source Maps
42 | */
43 |
44 | // https://webpack.js.org/configuration/devtool/#development
45 | devtool: 'cheap-module-eval-source-map',
46 |
47 | // If you have problems debugging vue-files in devtools,
48 | // set this to false - it *may* help
49 | // https://vue-loader.vuejs.org/en/options.html#cachebusting
50 | cacheBusting: true,
51 |
52 | cssSourceMap: true
53 | },
54 |
55 | build: {
56 | // Template for index.html
57 | index: path.resolve(__dirname, '../dist/index.html'),
58 |
59 | // Paths
60 | assetsRoot: path.resolve(__dirname, '../dist'),
61 | assetsSubDirectory: 'static',
62 | assetsPublicPath: '/',
63 |
64 | /**
65 | * Source Maps
66 | */
67 |
68 | productionSourceMap: true,
69 | // https://webpack.js.org/configuration/devtool/#production
70 | devtool: '#source-map',
71 |
72 | // Gzip off by default as many popular static hosts such as
73 | // Surge or Netlify already gzip all static assets for you.
74 | // Before setting to `true`, make sure to:
75 | // npm install --save-dev compression-webpack-plugin
76 | productionGzip: false,
77 | productionGzipExtensions: ['js', 'css'],
78 |
79 | // Run the build command with an extra argument to
80 | // View the bundle analyzer report after build finishes:
81 | // `npm run build --report`
82 | // Set to `true` or `false` to always turn it on or off
83 | bundleAnalyzerReport: process.env.npm_config_report
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/pages/home.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
75 |
84 |
76 |
80 |
81 |
82 | 初次加载，请耐心等待...
83 |
3 |
20 |
21 |
86 |
114 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 这是一个追剧网站的后台管理系统。模板参考了 [mengdu](https://github.com/mengdu)的项目，并在其基础上加了后台的功能。前端框架采用的`vue`,ui框架用的是`element-ui`,后台的框架用的`express`,数据库是`mysql`。
3 |
4 | 主要的功能是对影片资料的展示，影片的增删改查，对用户信息的展示，用户的增删改查，还有管理员自身资料的管理等等。 并且整个管理后台只支持管理员登录，不支持用户登录以及注册，后期如果涉及到更改，会增加权限分配功能，让用户也可以登录，只是管理的权限不同。(不过就针对这个项目而言，貌似不需要)
5 |
6 |
7 | 项目地址: [vue-admin](https://github.com/liyushilezhi/vue-admin)
8 |
9 | 警告,下面多图预警
10 |
11 | - 登录页
12 |
13 | 
14 |
15 | 登录页是整个项目的入口,会做用户名密码和验证码的判断，验证码是后台生成的，实现了点击刷新，并且验证码的值保存在cookie当中，方便前端做登录判断
16 |
17 | - 首页
18 |
19 | 登录成功后跳转首页，首页显示了当前注册的总人数和当前收录的总影片数。
20 |
21 | 
22 |
23 | 咳,ui功底不行啊，，，，将就看吧..
24 |
25 | - 用户列表
26 |
27 | 用户列表页支持分页查询，支持对用户信息的修改以及用户的删除操作。
28 |
29 | 
30 |
31 | 
32 |
33 | 
34 |
35 | - 影片列表
36 |
37 | 影片列表的功能同用户列表
38 |
39 | 
40 |
41 | 
42 |
43 | 
44 |
45 | - 添加影片
46 |
47 | 
48 |
49 | - 搜索
50 |
51 | 搜索包括用户搜索以及影片搜索，只做了按名称模糊搜索，如果有时间的话可以做全，原理都是很简单的.
52 |
53 | 
54 |
55 | - 设置
56 |
57 | 设置页可以对管理员的信息进行修改
58 |
59 | 
60 |
61 | - 关于
62 |
63 | 
64 |
65 |
66 |
67 | 后台数据库表:
68 |
69 | 影片数据表: movie
70 |
71 | 
72 |
73 | 用户数据表: user
74 |
75 | 
76 |
77 | > 安装
78 |
79 | `git clone git@github.com:liyushilezhi/vue-admin.git`
80 |
81 | `cd vue-admin`
82 |
83 | `cnpm i`
84 |
85 | 开启node后台服务
86 |
87 | `npm start`
88 |
89 | `npm run dev`
90 |
91 | 上面的操作都是基于你有数据库的情况下。
92 |
93 | 在本地新建数据库，结构参照上面的数据表,并且配置`server`文件夹下的`db.js`
94 |
95 | ```javascript
96 | // 数据库连接配置
97 | module.exports = {
98 | mysql: {
99 | host: 'localhost',
100 | user: 'root',
101 | password: '123456',
102 | database: 'moviedb',
103 | port: '3306'
104 | }
105 | }
106 | ```
107 |
108 | 这时候再执行 `npm start` `npm run dev`即可
109 |
110 | 我的博客: [前端开发小哥](http://neverlove.me)
--------------------------------------------------------------------------------
/src/m/navbar/navbar.less:
--------------------------------------------------------------------------------
1 | @nav-name: m-nav;
2 | @navbar-name: m-navbar;
3 |
4 | .@{navbar-name} {
5 | height: 50px;
6 | padding: 0 15px;
7 | background-color: #F8F9FA;
8 | line-height: 50px;
9 |
10 | & &-brand{
11 | font-weight: bold;
12 | display: inline-block;
13 | margin-right: 15px;
14 | }
15 | & &-toggler{
16 | margin-top: 10px;
17 | background: none;
18 | outline: none;
19 | border: none;
20 | cursor: pointer;
21 | float: right;
22 | display: none;
23 |
24 | & .m-icon-bar{
25 | display: block;
26 | width: 22px;
27 | height: 2px;
28 | border-radius: 1px;
29 | margin: 5px 0;
30 | background-color: #646464;
31 | }
32 | }
33 | }
34 |
35 | .@{nav-name} {
36 | display: inline-block;
37 | list-style: none;
38 | margin: 0;
39 | padding: 0;
40 | vertical-align: top;
41 |
42 | &.right{
43 | float: right;
44 | }
45 |
46 | & &-item {
47 | display: inline-block;
48 | padding: 0 15px;
49 | cursor: pointer;
50 |
51 | & > a {
52 | color: inherit;
53 | margin: 0 -15px;
54 | padding: 0 15px;
55 | line-height: inherit;
56 | display: inherit;
57 | }
58 | &.active {
59 | background-color: rgba(0,0,0, 0.05);
60 | }
61 | &.disabled {
62 | color: #b3b3b3;
63 | cursor: not-allowed;
64 | }
65 | }
66 | }
67 |
68 | @media (max-width: 767.98px) {
69 | .@{navbar-name} {
70 | & &-brand {
71 | display: block;
72 | margin-right: 0;
73 | }
74 | & &-toggler {
75 | display: block;
76 | }
77 | }
78 | .@{navbar-name}.open {
79 | height: auto;
80 | }
81 | .@{navbar-name} .@{nav-name} {
82 | display: none;
83 | }
84 | .@{navbar-name}.open .@{nav-name} {
85 | display: block;
86 | float: none !important;
87 | &-item{
88 | display: block;
89 | }
90 | }
91 | }
92 |
93 | /**theme**/
94 | .@{navbar-name} {
95 | &.dark {
96 | background-color: #333940;
97 | color: #e0e0e0;
98 |
99 | & .@{nav-name} .@{nav-name}-item.disabled {
100 | color: rgba(255, 255, 255, 0.42);
101 | }
102 | }
103 | &.info {
104 | background-color: #12AFE3;
105 | color: #f7f7f7;
106 | & .@{nav-name} .@{nav-name}-item.disabled {
107 | color: rgba(255, 255, 255, 0.42);
108 | }
109 | }
110 | &.primary {
111 | background-color: #7952B3;
112 | color: #f7f7f7;
113 | & .@{nav-name} .@{nav-name}-item.disabled {
114 | color: rgba(255, 255, 255, 0.42);
115 | }
116 | }
117 | &.danger {
118 | background-color: #F56C6C;
119 | color: #f7f7f7;
120 | & .@{nav-name} .@{nav-name}-item.disabled {
121 | color: rgba(255, 255, 255, 0.42);
122 | }
123 | }
124 | &.warning {
125 | background-color: #F9AA40;
126 | color: #f7f7f7;
127 | & .@{nav-name} .@{nav-name}-item.disabled {
128 | color: rgba(255, 255, 255, 0.42);
129 | }
130 | }
131 | &.success {
132 | background-color: #03B976;
133 | color: #f7f7f7;
134 | & .@{nav-name} .@{nav-name}-item.disabled {
135 | color: rgba(255, 255, 255, 0.42);
136 | }
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/src/assets/css/main.css:
--------------------------------------------------------------------------------
1 | html,
2 | body{
3 | background-color: #fff;
4 | }
5 | body{
6 | padding: 0;
7 | margin: 0;
8 | color: #464C5B;
9 | font-size: 14px;
10 | line-height: 1.4;
11 | font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
12 | /*font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", "Microsoft YaHei";*/
13 | /*font-family: Roboto, Segoe UI, "Microsoft YaHei", Helvetica Neue For Number,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;*/
14 | }
15 | div{
16 | box-sizing: border-box;
17 | }
18 | a{
19 | text-decoration: none;
20 | color: #0366d6;
21 | }
22 | pre,code{
23 | font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace, "Microsoft YaHei";
24 | }
25 | code{
26 | color: #d03bc8;
27 | padding: 0.1em 0.4em;
28 | margin: 0;
29 | background-color: rgba(111, 66, 193, 0.07);
30 | border-radius: 3px;
31 | }
32 | ::selection{
33 | background: #CBD1DE;
34 | }
35 | .f-left{
36 | float: left;
37 | }
38 | .f-right{
39 | float: right;
40 | }
41 | .clearfix:before,
42 | .clearfix:after{
43 | content: "";
44 | display: table;
45 | clear: both;
46 | }
47 | .text-center{
48 | text-align: center;
49 | }
50 |
51 |
52 |
53 |
54 |
55 |
56 | .priview-box{
57 | margin-bottom: 50px;
58 | }
59 | .priview-box .description{
60 | color: #62676C;
61 | }
62 |
63 |
64 |
65 |
66 |
67 | .page-body{
68 | padding: 15px;
69 | }
70 | .page-body .page-header{
71 | background: #fff;
72 | padding: 15px;
73 | margin: -15px -15px 15px -15px;
74 | }
75 | .page-body .page-header .page-title{
76 | font-size: 18px;
77 | margin: 0;
78 | margin-bottom: 15px;
79 | color: #585A5F;
80 | }
81 |
82 | .page-body h1{
83 | font-size: 2rem;
84 | font-weight: 400;
85 | margin: 20px 0;
86 | }
87 | .page-body h2{
88 | font-size: 1.5rem;
89 | font-weight: 400;
90 | }
91 |
92 |
93 |
94 |
95 | .box{
96 | background: #fff;
97 | border-radius: 3px;
98 | padding: 15px;
99 | }
100 | .box .box-header:before,
101 | .box .box-header:after,
102 | .box .box-footer:before,
103 | .box .box-footer:after{
104 | content: "";
105 | display: table;
106 | clear: both;
107 | }
108 | .box .box-header{
109 | padding-bottom: 15px;
110 | }
111 | .box .box-footer{
112 | padding: 15px 0;
113 | }
114 | .box .box-header .box-title{
115 | font-size: 18px;
116 | font-weight: 100;
117 | margin: 0;
118 | }
119 |
120 | .progress-bg{
121 | margin: 0 auto;
122 | width: 60%;
123 | height: 4px;
124 | background: rgba(245,245,245, 0.2);
125 | overflow: hidden;
126 | }
127 | .progress-bg .progress{
128 | width: 50%;
129 | height: 4px;
130 | margin-left: -50%;
131 | background: #19a05e;
132 | float: left;
133 | animation: progress 1s linear infinite;
134 | }
135 |
136 | @keyframes progress {
137 | 0% {
138 | margin-left: -50%;
139 | }
140 | 100% {
141 | margin-left: 100%;
142 | }
143 | }
144 |
--------------------------------------------------------------------------------
/src/m/keyboard/dict-helper.js:
--------------------------------------------------------------------------------
1 | import dicts from './dict'
2 | const dict = {
3 | pyhz: dicts,
4 | azhz: {}
5 | }
6 |
7 | var pykeys = Object.keys(dict.pyhz)
8 | // window.pykeys = pykeys
9 | // window.dict = dict
10 | // 构造a~z的汉字映射
11 | for (var i = 97; i < 123; i++) {
12 | var ch = String.fromCharCode(i)
13 | var pylist = pykeys.filter(key => key.indexOf(ch) === 0)
14 | if (pylist.length > 0) {
15 | dict.azhz[ch] = ''
16 | pylist.forEach(key => {
17 | dict.azhz[ch] += dict.pyhz[key]
18 | })
19 | } else {
20 | dict.azhz[ch] = ch
21 | }
22 | }
23 |
24 | // 从拼音获取汉字
25 | function getPinyinHanzi (pinyin) {
26 | if (dict.azhz[pinyin]) {
27 | return dict.azhz[pinyin]
28 | } else if (dict.pyhz[pinyin]) {
29 | return dict.pyhz[pinyin]
30 | } else {
31 | return ''
32 | }
33 | }
34 | // 分词
35 | // function pinyinAnalysis (pinyin = '') {
36 | // var result = {
37 | // input: '',
38 | // result: []
39 | // }
40 | // var chs = pinyin.split('')
41 | // for (var i = 0; i < chs.length; i++) {
42 | // var ch = chs[i]
43 | // result.input += ch
44 | // var keys = pykeys.filter(pyk => pyk === result.input)
45 |
46 | // if (keys.length > 1) {
47 | // if (keys[0] === ch) {
48 |
49 | // }
50 | // } else if (keys.length === 1) {
51 | // result.result.push(result.input)
52 | // result.input = ''
53 | // } else {
54 | // result.result[result.result.length - 1] = result.input
55 | // }
56 | // }
57 | // return result
58 | // }
59 |
60 |
61 | function pinyinAnalysis (pinyin) {
62 | var result = {
63 | input: '',
64 | result: []
65 | }
66 | if (getPinyinHanzi(pinyin)) {
67 | result.input = pinyin
68 | result.result = pinyin
69 | }
70 | var temp = ''
71 | for (var i = 0; i < pinyin.length; i++) {
72 | temp += pinyin[i]
73 | if (!getPinyinHanzi(temp)) continue
74 | // flag表示如果当前能匹配到结果、并且往后5个字母不能匹配结果，因为最长可能是5个字母，如 zhuang
75 | var flag = false
76 | if ((i + 1) < pinyin.length) {
77 | for (var j = 1; j <= 5 && (i + j) < pinyin.length; j++) {
78 | if (getPinyinHanzi(pinyin.substr(0, i + j + 1))) {
79 | flag = true
80 | break
81 | }
82 | }
83 | }
84 | if (!flag) {
85 | result.result = pinyin.substr(0, i + 1) + '\'' + pinyin.substr(i + 1)
86 | }
87 | }
88 | result.input = pinyin
89 | return result
90 | }
91 |
92 |
93 | function getHanzi (py) {
94 | var result = {
95 | input: '',
96 | pinyin: '',
97 | result: []
98 | }
99 | if (!py) return result
100 | py = py.toLocaleLowerCase()
101 | if (!/^[a-zA-Z]*$/.test(py)) {
102 | result.result = [py].concat(py.split(''))
103 | } else {
104 | if (py.length === 1) {
105 | result.result = dict.azhz[py].split('')
106 | } else if (dict.pyhz[py]) {
107 | result.result = dict.pyhz[py].split('')
108 | } else {
109 | result.result = [py].concat(py.split(''))
110 | }
111 | }
112 | result.input = py
113 | result.pinyin = py
114 | return result
115 | }
116 |
117 | export default {
118 | dict,
119 | getHanzi,
120 | getPinyinHanzi,
121 | pinyinAnalysis
122 | }
123 |
--------------------------------------------------------------------------------
/src/components/vmenu/menu.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
19 |
5 |
6 | 主页
7 |
8 |
9 |
10 |
18 |
11 |
17 | 影视资源管理系统后台
12 |当前总用户数: {{getMemNum.length}}
13 |当前总影片数: {{movieNum}}
14 |欢迎帅气的管理员大大
15 |今天也要元气满满哦....
16 |
3 |
42 |
43 |
70 |
107 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue'
4 | import 'babel-polyfill'
5 | import ElementUI from 'element-ui'
6 | import Axios from 'axios'
7 | import NProgress from 'nprogress'
8 |
9 | import App from './App'
10 | import store from './store'
11 | import router from './router'
12 | import 'element-ui/lib/theme-chalk/index.css'
13 | import '@/assets/font-awesome-4.7.0/css/font-awesome.min.css'
14 | import '@/assets/css/main.css'
15 | import '@/assets/css/scrollbar.css'
16 | import '@/assets/css/reset.css'
17 | import 'nprogress/nprogress.css'
18 | import 'animate.css'
19 |
20 |
21 | import DropdownPlugin from './m/dropdown'
22 | import NavbarPlugin from './m/navbar'
23 | import ContextMenuPlugin from './m/context-menu'
24 | import MButton from '@/m/button'
25 | import MSwitch from '@/m/switch'
26 | import MAlert from '@/m/alert'
27 | import MCheckbox from '@/m/checkbox'
28 | import MInput from '@/m/input'
29 | import MLoading from '@/m/loading'
30 | import Mkeyboard from '@/m/keyboard'
31 | import MNumberkeyboard from '@/m/number-keyboard'
32 | import MBox from '@/m/box'
33 | import MBackTop from '@/m/back-top'
34 | import MLoader from '@/m/loader'
35 | import MContainer from '@/m/container'
36 |
37 | Vue.use(ElementUI)
38 |
39 | Vue.use(DropdownPlugin)
40 | Vue.use(NavbarPlugin)
41 | Vue.use(ContextMenuPlugin)
42 | Vue.use(MButton)
43 | Vue.use(MSwitch)
44 | Vue.use(MAlert)
45 | Vue.use(MCheckbox)
46 | Vue.use(MInput)
47 | Vue.use(MLoading)
48 | Vue.use(Mkeyboard)
49 | Vue.use(MNumberkeyboard)
50 | Vue.use(MBox)
51 | Vue.use(MBackTop)
52 | Vue.use(MLoader)
53 | Vue.use(MContainer)
54 |
55 | var whiteList = ['demo', 'login']
56 | router.beforeEach((to, from, next) => {
57 | NProgress.start()
58 | var token = sessionStorage.getItem('token')
59 | if (!token && whiteList.indexOf(to.name) === -1) {
60 | app && app.$message.warning('未授权，请登陆授权后继续')
61 | NProgress.done()
62 | return next({name: 'login'})
63 | }
64 | return next()
65 | })
66 |
67 | router.afterEach(transition => {
68 | setTimeout(() => {
69 | NProgress.done()
70 | })
71 | })
72 |
73 |
74 | window.APP_INFO = process.env.APP_INFO
75 | // status < 500 不会抛错误
76 | Axios.defaults.validateStatus = status => {
77 | return status < 500
78 | }
79 | // 设置请求token
80 | Axios.interceptors.request.use(config => {
81 | var token = sessionStorage.getItem('token')
82 | config.headers['Authorization'] = 'Bearer ' + token
83 | // console.log(config)
84 | return config
85 | })
86 |
87 | // 接口错误拦截
88 | Axios.interceptors.response.use(res => {
89 | // console.log(res)
90 | if (res.status === 401) {
91 | app && app.$message({
92 | type: 'warning',
93 | message: '登录身份过期，请重新登录。'
94 | })
95 | sessionStorage.removeItem('token')
96 | sessionStorage.removeItem('user')
97 | router.push({name: 'login'})
98 | return Promise.reject(new Error('身份过期'))
99 | } else {
100 | return res.data
101 | }
102 | }, err => {
103 | app.$notify.error({
104 | title: '服务错误',
105 | message: '服务器响应错误 ' + err.message
106 | })
107 | return Promise.reject(err)
108 | })
109 |
110 |
111 | Vue.prototype.$http = Axios
112 | Vue.http = Axios
113 |
114 |
115 | Vue.config.productionTip = false
116 |
117 | /* eslint-disable no-new */
118 | var app = new Vue({
119 | el: '#app',
120 | store,
121 | router,
122 | template: '
4 |
41 |
5 |
6 | 主页
7 | 影片信息搜索
8 |
9 |
10 |
11 |
40 |
12 | 影片搜索（暂只支持按片名搜索,支持模糊搜索）:
13 |
14 |搜索
16 |
17 | 13 |
14 |
18 |
19 |
20 |
21 | ![]()
22 |
23 |
24 |
32 |
33 |
36 |
37 | 没有这条数据
38 |
39 |
9 |
27 |
28 |
29 |
83 |
137 |
--------------------------------------------------------------------------------
/src/m/alert/alert.vue:
--------------------------------------------------------------------------------
1 |
2 |
17 |
25 |
26 |
8 |
9 |
13 |
14 |
47 |
133 |
--------------------------------------------------------------------------------
/src/m/back-top/back-top.vue:
--------------------------------------------------------------------------------
1 |
2 | {{description}}
11 | 12 |
8 |
9 |
10 |
11 |
114 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "admin",
3 | "version": "1.0.4",
4 | "description": "admin",
5 | "author": "是李宇呀丶",
6 | "private": true,
7 | "app": {
8 | "name": "追剧管家后台管理系统"
9 | },
10 | "license": "MIT",
11 | "scripts": {
12 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
13 | "start": "node ./server/index",
14 | "publish": "node build/publish.js",
15 | "unit": "jest --config test/unit/jest.conf.js --coverage",
16 | "e2e": "node test/e2e/runner.js",
17 | "test": "npm run unit && npm run e2e",
18 | "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
19 | "build": "node build/build.js"
20 | },
21 | "dependencies": {
22 | "animate.css": "^3.5.2",
23 | "axios": "^0.17.1",
24 | "babel-polyfill": "^6.26.0",
25 | "cookie-parser": "^1.4.3",
26 | "element-ui": "^2.0.11",
27 | "express": "^4.16.3",
28 | "less": "^2.7.3",
29 | "less-loader": "^4.1.0",
30 | "mysql": "^2.15.0",
31 | "nprogress": "^0.2.0",
32 | "svg-captcha": "^1.3.11",
33 | "vue": "^2.5.2",
34 | "vue-router": "^3.0.1",
35 | "vuex": "^3.0.1"
36 | },
37 | "devDependencies": {
38 | "autoprefixer": "^7.1.2",
39 | "babel-core": "^6.22.1",
40 | "babel-eslint": "^8.2.1",
41 | "babel-helper-vue-jsx-merge-props": "^2.0.3",
42 | "babel-jest": "^21.0.2",
43 | "babel-loader": "^7.1.1",
44 | "babel-plugin-dynamic-import-node": "^1.2.0",
45 | "babel-plugin-syntax-jsx": "^6.18.0",
46 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
47 | "babel-plugin-transform-runtime": "^6.22.0",
48 | "babel-plugin-transform-vue-jsx": "^3.5.0",
49 | "babel-preset-env": "^1.3.2",
50 | "babel-preset-stage-2": "^6.22.0",
51 | "babel-register": "^6.22.0",
52 | "chalk": "^2.0.1",
53 | "chromedriver": "^2.27.2",
54 | "copy-webpack-plugin": "^4.0.1",
55 | "cross-spawn": "^5.0.1",
56 | "css-loader": "^0.28.0",
57 | "eslint": "^4.15.0",
58 | "eslint-config-standard": "^10.2.1",
59 | "eslint-friendly-formatter": "^3.0.0",
60 | "eslint-loader": "^1.7.1",
61 | "eslint-plugin-html": "^4.0.2",
62 | "eslint-plugin-import": "^2.7.0",
63 | "eslint-plugin-node": "^5.2.0",
64 | "eslint-plugin-promise": "^3.4.0",
65 | "eslint-plugin-standard": "^3.0.1",
66 | "eslint-plugin-vue": "^4.0.0",
67 | "extract-text-webpack-plugin": "^3.0.0",
68 | "file-loader": "^1.1.4",
69 | "friendly-errors-webpack-plugin": "^1.6.1",
70 | "html-webpack-plugin": "^2.30.1",
71 | "jest": "^22.0.4",
72 | "jest-serializer-vue": "^0.3.0",
73 | "less": "^2.7.3",
74 | "less-loader": "^4.0.5",
75 | "nightwatch": "^0.9.12",
76 | "node-notifier": "^5.1.2",
77 | "optimize-css-assets-webpack-plugin": "^3.2.0",
78 | "ora": "^1.2.0",
79 | "portfinder": "^1.0.13",
80 | "postcss-import": "^11.0.0",
81 | "postcss-loader": "^2.0.8",
82 | "postcss-url": "^7.2.1",
83 | "rimraf": "^2.6.0",
84 | "selenium-server": "^3.0.1",
85 | "semver": "^5.3.0",
86 | "shelljs": "^0.7.6",
87 | "uglifyjs-webpack-plugin": "^1.1.1",
88 | "url-loader": "^0.5.8",
89 | "vue-jest": "^1.0.2",
90 | "vue-loader": "^13.3.0",
91 | "vue-style-loader": "^3.0.1",
92 | "vue-template-compiler": "^2.5.2",
93 | "webpack": "^3.6.0",
94 | "webpack-bundle-analyzer": "^2.9.0",
95 | "webpack-dev-server": "^2.9.1",
96 | "webpack-merge": "^4.1.0"
97 | },
98 | "engines": {
99 | "node": ">= 6.0.0",
100 | "npm": ">= 3.0.0"
101 | },
102 | "browserslist": [
103 | "> 1%",
104 | "last 2 versions",
105 | "not ie <= 8"
106 | ]
107 | }
108 |
--------------------------------------------------------------------------------
/src/pages/editPwd.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
36 |
37 |
100 |
120 |
--------------------------------------------------------------------------------
/src/m/checkbox/checkbox.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
139 |
142 |
--------------------------------------------------------------------------------
/src/components/app-view.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
29 | 你的新密码请牢记哦！
30 |
33 |
34 |
35 |
5 |
6 | 主页
7 | 修改密码
8 |
9 |
10 |
11 |
13 |
14 |
16 |
17 |
19 |
20 | 提交
21 | 重置
22 |
23 |
24 |
25 | 修改密码
12 |
15 | 
16 | 追剧管家
17 |
18 |
16 | 追剧管家
17 |
21 | {{user.username}}
22 |
23 |
24 | 退出账号
37 |
3 |
38 |
39 |
105 |
207 |
--------------------------------------------------------------------------------
/src/m/context-menu/context-menu.vue:
--------------------------------------------------------------------------------
1 |
80 |
81 |
113 |
162 |
163 |
197 |
--------------------------------------------------------------------------------
/src/pages/addMovie.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
37 |
5 |
6 |
7 |
6 | 你好，欢迎登录影视管家后台
8 | 30 | 31 |32 | 33 | 35 |
36 |
3 |
63 | 添加成功
64 |
67 | `
68 |
69 |
70 |
168 |
169 |
184 |
--------------------------------------------------------------------------------
/src/m/button/btn.less:
--------------------------------------------------------------------------------
1 |
2 | @btn-name: m-button;
3 | @btn-border-radius: 4px;
4 | @btn-border-default-color: #727B84;
5 |
6 | @btn-default-color: #fff;
7 | @btn-default-bgcolor: #727B84;
8 |
9 | @btn-info-bgcolor: #2DB7F5;
10 | @btn-primary-bgcolor: #7952B3;
11 | @btn-success-bgcolor: #03B976;
12 | @btn-danger-bgcolor: #F56C6C;
13 | @btn-warning-bgcolor: #F9AA40;
14 |
15 | @info-disabled-bgcolor: #6BCCEA;
16 | @primary-disabled-bgcolor: #9E98CE;
17 | @success-disabled-bgcolor: #56ceb0;
18 | @danger-disabled-bgcolor: #FAB6B6;
19 | @warning-disabled-bgcolor: #ffc576;
20 |
21 | @color-default-light: #868E96;
22 | @color-primary-light: #8E74B4;
23 | @color-info-light: #36C1FA;
24 | @color-success-light: #05a56a;
25 | @color-danger-light: #F78989;
26 | @color-warning-light: #FAB458;
27 |
28 | a.@{btn-name}{
29 | text-decoration: none;
30 | color: inherit;
31 | }
32 | .@{btn-name}{
33 | color: @btn-default-color;
34 | background-image: none;
35 | background-color: @btn-default-bgcolor;
36 | display: inline-block;
37 | padding: 7px 21px;
38 | font-size: 14px;
39 | font: inherit;
40 | font-weight: 400;
41 | line-height: 1.42857143;
42 | text-align: center;
43 | vertical-align: middle;
44 | white-space: nowrap;
45 | touch-action: manipulation;
46 | cursor: pointer;
47 | outline: none;
48 | border-radius: @btn-border-radius;
49 | border:solid 1px @btn-border-default-color;
50 | transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
51 |
52 | user-select: none;
53 | moz-user-select: -moz-none;
54 | -moz-user-select: none;
55 | -o-user-select:none;
56 | -khtml-user-select:none;
57 | -webkit-user-select:none;
58 | -ms-user-select:none;
59 | &:hover{
60 | background-color: @color-default-light;
61 | border:solid 1px @color-default-light;
62 | }
63 | &:active,
64 | &.active,{
65 | opacity: 0.9;
66 | position: relative;
67 | }
68 | &.active:after{
69 | content: '';
70 | position: absolute;
71 | display: block;
72 | top: -4px;
73 | left: -4px;
74 | bottom: -4px;
75 | right: -4px;
76 | opacity: 0.35;
77 | border: solid 6px;
78 | border-radius: 6px;
79 | border-color: inherit;
80 | }
81 | & + &{
82 | margin-left: 10px;
83 | }
84 | &:disabled,
85 | &.disabled{
86 | cursor: not-allowed;
87 | // pointer-events: none;
88 | color: rgba(0, 0, 0, 0.25);
89 | background-color: #f5f5f5;
90 | border-color: #d9d9d9;
91 | }
92 | &&-rounded{
93 | border-radius: 50px;
94 | }
95 |
96 | &&-max{
97 | padding: 15px 45px;
98 | font-size: 18px;
99 | }
100 | &&-large{
101 | padding: 10px 30px;
102 | }
103 | &&-small{
104 | padding: 5px 15px;
105 | font-size: 13px;
106 | }
107 | &&-mini{
108 | padding: 4px 12px;
109 | font-size: 12px;
110 | }
111 | &&-block{
112 | display: block;
113 | width: 100%;
114 | & + & {
115 | margin-left: auto;
116 | margin-top: 10px;
117 | }
118 | }
119 |
120 | .make-btn-theme(info);
121 | .make-btn-theme(primary);
122 | .make-btn-theme(success);
123 | .make-btn-theme(danger);
124 | .make-btn-theme(warning);
125 |
126 | .make-btn-clicked();
127 |
128 | &&-type-plain{
129 | color: #868E96;
130 | border-color: @btn-border-default-color;
131 | background-color: transparent;
132 | &:hover{
133 | background-color: @btn-default-bgcolor;
134 | color: #fff;
135 | }
136 | .make-btn-type-plain-theme(info);
137 | .make-btn-type-plain-theme(primary);
138 | .make-btn-type-plain-theme(success);
139 | .make-btn-type-plain-theme(danger);
140 | .make-btn-type-plain-theme(warning);
141 | }
142 | }
143 |
144 | .make-btn-theme(@theme){
145 | &&-@{theme} {
146 | color: #fff;
147 | background-color: ~"@{btn-@{theme}-bgcolor}";
148 | border-color: ~"@{btn-@{theme}-bgcolor}";
149 | &:hover{
150 | background-color: ~"@{color-@{theme}-light}";
151 | border-color: ~"@{color-@{theme}-light}";
152 | }
153 | &:disabled,
154 | &.disabled{
155 | cursor: not-allowed;
156 | // pointer-events: none;
157 | background-color: ~"@{@{theme}-disabled-bgcolor}";
158 | border-color: ~"@{@{theme}-disabled-bgcolor}";
159 | }
160 | }
161 | }
162 | // 点击涟漪效果
163 | .make-btn-clicked(){
164 | &.clicked{
165 | position: relative;
166 | &:before{
167 | content: '';
168 | position: absolute;
169 | display: block;
170 | top: -1px;
171 | left: -1px;
172 | bottom: -1px;
173 | right: -1px;
174 | opacity: .8;
175 | border: solid 0px;
176 | border-color: inherit;
177 | border-radius: inherit;
178 | animation: btn-clicked-effect .5s;
179 | }
180 | }
181 | }
182 | .make-btn-type-plain-theme(@theme){
183 | &.@{btn-name}-@{theme}{
184 | color: ~"@{btn-@{theme}-bgcolor}";
185 | border-color: ~"@{color-@{theme}-light}";
186 | &:hover{
187 | border-color: ~"@{btn-@{theme}-bgcolor}";
188 | background-color: ~"@{btn-@{theme}-bgcolor}";
189 | color: #fff;
190 | }
191 | }
192 | }
193 | .@{btn-name}-block+.@{btn-name}-block{
194 | margin-top: 5px;
195 | }
196 | .@{btn-name}-group{
197 | position: relative;
198 | display: inline-block;
199 | vertical-align: middle;
200 | }
201 | .@{btn-name}-group .@{btn-name}{
202 | position: relative;
203 | float: left;
204 | border-radius: 0;
205 | margin-left: -1px;
206 | &:first-child{
207 | margin-left: 0;
208 | border-top-left-radius: @btn-border-radius;
209 | border-bottom-left-radius: @btn-border-radius;
210 | }
211 | &:last-child{
212 | border-top-right-radius: @btn-border-radius;
213 | border-bottom-right-radius: @btn-border-radius;
214 | }
215 | }
216 |
217 |
218 | /**
219 | * animation
220 | * e.g keyframes(effect-test, all, {css})
221 | */
222 | .keyframes (@name, @prefix, @content) when (@prefix = def) {
223 | @keyframes @name {
224 | @content();
225 | }
226 | }
227 | .keyframes (@name, @prefix, @content) when (@prefix = moz) {
228 | @-moz-keyframes @name {
229 | @content();
230 | }
231 | }
232 | .keyframes (@name, @prefix, @content) when (@prefix = o) {
233 | @-o-keyframes @name {
234 | @content();
235 | }
236 | }
237 | .keyframes (@name, @prefix, @content) when (@prefix = webkit) {
238 | @-webkit-keyframes @name{
239 | @content();
240 | }
241 | }
242 | .keyframes (@name, @prefix, @content) when (@prefix = all) {
243 | .keyframes(@name, moz, @content);
244 | .keyframes(@name, o, @content);
245 | .keyframes(@name, webkit, @content);
246 | .keyframes(@name, def, @content);
247 | }
248 |
249 | .keyframes(btn-clicked-effect, all, {
250 | to{
251 | top: -6px;
252 | left: -6px;
253 | bottom: -6px;
254 | right: -6px;
255 | border-width: 6px;
256 | opacity: 0;
257 | }
258 | });
259 |
--------------------------------------------------------------------------------
/src/pages/userlist.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 | 首页
7 | 添加新资源
8 |
9 |
10 |
11 | 添加新资源
5 |
12 |
13 |
14 |
16 |
17 |
19 |
20 |
21 |
30 |
31 |
32 |
34 |
35 |
36 |
41 |
42 |
43 |
44 |
47 |
48 |
49 |
51 |
52 | 立即创建
53 | 重置
54 |
55 |
56 |
57 |
58 |
3 |
66 |
67 |
194 |
195 |
218 |
--------------------------------------------------------------------------------
4 |
6 | 首页
7 | 用户列表
8 |
9 |
10 |
11 | 用户列表
5 |
12 |
13 |
14 |
15 | {{scope.row.id - 1}}
16 |
17 |
18 |
19 |
20 | ![]()
21 |
22 |
23 |
27 |
28 | 修改
29 | 删除
30 |
31 |
32 |
33 |
45 |
46 |
47 |
49 |
50 |
52 |
53 |
54 |
57 |
58 |
59 |
63 |
64 |
65 |
34 |
41 |
42 |
43 |
44 |