front_end/package-lock.json

@@ -7905,6 +7905,11 @@
         "path-key": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/nth-check/download/nth-check-1.0.2.tgz",

front_end/package.json

@@ -14,6 +14,7 @@
     "js-cookie": "^2.2.1",
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
+    "nprogress": "^0.2.0",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2"

front_end/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" v-title data-title="NJUSE酒店管理系统">
     <transition name="fade-transform" mode="out-in">
       <router-view/>
     </transition>

front_end/src/api/user.js

@@ -17,9 +17,9 @@ export function registerAPI(data){
         data
     })
 }
-export function getUserInfoAPI(){
+export function getUserInfoAPI(id){
     return axios({
-        url: `${api.userPre}/userInfo`,
+        url: `${api.userPre}/${id}/getUserInfo`,
         method: 'GET'
     })
 }

front_end/src/components/header.vue

@@ -11,10 +11,8 @@
                     <a-icon type="home" />首页
                 </router-link>
             </a-menu-item>
-            <a-menu-item key="2" @click="selectMenu">
-                <router-link :to="{ name: 'userInfo'}">
-                    <a-icon type="user" />个人中心
-                </router-link>
+            <a-menu-item key="2" @click="jumpToUserInfo">
+                <a-icon type="user" />个人中心
             </a-menu-item>
             <a-menu-item key="3" @click="selectMenu">
                 <router-link :to="{ name: 'manageHotel'}">
@@ -88,14 +86,13 @@ export default {
             'logout'
         ]),
         selectMenu(v){
-            console.log(v)
         },
         async quit() {
             await this.$store.dispatch('logout')
             this.$router.push(`/login?redirect=${this.$route.fullPath}`)
         },
         jumpToUserInfo() {
-            // this.$router.push({ name: 'info', params: { userId: this.userId } })
+            this.$router.push({ name: 'userInfo', params: { userId: this.userId } })
         },
         jumpToHome() {
 

front_end/src/main.js

@@ -5,7 +5,7 @@ import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import store from './store'
 
-// import '@/permission'
+import '@/permission'
 Vue.config.productionTip = false
 const options = {
   namespace: 'pro__',
@@ -14,6 +14,11 @@ const options = {
 }
 Vue.use(Antd)
 
+Vue.directive('title', {
+  inserted: function (el, binding) {
+    document.title = el.dataset.title
+  }
+})
 new Vue({
   router,
   store,

front_end/src/permission.js

@@ -0,0 +1,39 @@
+import router from './router'
+import store from './store'
+import { getToken } from '@/utils/auth'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+const whiteList = ['/login'] // no redirect whitelist
+router.beforeEach(async(to, from, next) => {
+    // start progress bar
+    NProgress.start()
+    // determine whether the user has logged in
+    const hasToken = getToken()
+    if (hasToken) {
+        store.commit('set_userId', hasToken)
+      if (to.path === '/login') {
+        // if is logged in, redirect to the home page
+        next({path: '/'})
+        NProgress.done()
+      } else {
+        next()
+        NProgress.done()
+      }
+    } else {
+      /* has no token*/
+      if (whiteList.indexOf(to.path) !== -1) {
+        // in the free login whitelist, go directly
+        next()
+      } else {
+        // other pages that do not have permission to access are redirected to the login page.
+        next(`/login?redirect=${to.path}`)
+        NProgress.done()
+      }
+    }
+  })
+  
+  router.afterEach(() => {
+    // finish progress bar
+    NProgress.done()
+  })
+  

front_end/src/router/index.js

@@ -25,7 +25,7 @@ const routes = [
         component: () => import('@/views/hotel/hotelList')
       },
       {
-        path: 'hotel/hotelDetail/:hotelId',
+        path: '/hotel/hotelDetail/:hotelId',
         name: 'hotelDetail',
         component: () => import('@/views/hotel/hotelDetail')
       },

front_end/src/store/modules/user.js

@@ -13,7 +13,6 @@ import {
 const getDefaultState = () => {
     return {
         token: getToken(),
-        name: '',
         userId: '',
         userInfo: {
 
@@ -35,6 +34,9 @@ const user = {
         set_token: function(state, token){
             state.token = token
         },
+        set_email: (state, data) => {
+            state.email = data
+        },
         set_userId: (state, data) => {
             state.userId = data
         },
@@ -47,11 +49,12 @@ const user = {
     },
 
     actions: {
-        login: async ({ commit }, userData) => {
+        login: async ({ dispatch, commit }, userData) => {
             const res = await loginAPI(userData)
             if(res){
-                setToken(res)
-                commit('set_token', res)
+                setToken(res.id)
+                commit('set_userId', res.id)
+                router.push('/hotel/hotelList')
             }
         },
         register: async({ commit }, data) => {
@@ -60,9 +63,9 @@ const user = {
                 message.success('注册成功')
             }
         },
-        getUserInfo({ commit }) {
+        getUserInfo({ state, commit }) {
             return new Promise((resolve, reject) => {
-              getUserInfoAPI().then(response => {
+              getUserInfoAPI(state.userId).then(response => {
                 const data = response
                 if (!data) {
                   reject('登录已过期，请重新登录')

front_end/src/utils/request.js

@@ -41,9 +41,6 @@ const service = axios.create({
 
 //request incerceptor
 service.interceptors.request.use((config) => {
-  if (store.getters.token) {
-    config.headers['Authorization'] = getToken()
-  }
   const requestConfig = {
     ...config,
     url: `${config.url}`,
@@ -54,13 +51,15 @@ service.interceptors.request.use((config) => {
 service.interceptors.response.use((response) => {
   switch (response.status) {
     case 200:
-      return response.data
+      if(response.data.success && response.data.success){
+        return response.data.content
+      }
+      message.error(response.data.message)
+      break
     case 404:
       return false
     default:
-      if(response.data.message){
-        message.error(response.data.message)
-      }
+      message.error(response.data.message)
   }
 })
 

front_end/src/views/hotel/components/orderModal.vue

@@ -90,7 +90,6 @@ export default {
                 },
             },
             totalPrice: '',
-            form: '',
         }
     },
     computed: {

front_end/src/views/hotelManager/components/addRoomModal.vue

@@ -0,0 +1,86 @@
+<template>
+    <a-modal
+        :visible="addRoomModalVisible"
+        title="录入客房"
+        cancelText="取消"
+        okText="确定"
+        @cancel="cancel"
+        @ok="handleSubmit"
+    >
+        <a-form :form="form" style="margin-top: 30px" v-bind="formItemLayout">
+            <a-form-item label="房型" v-bind="formItemLayout">
+                <a-select
+                    v-decorator="[
+                    'roomType', 
+                    { rules: [{ required: true, message: '请选择房型' }] }]"
+                >
+                  <a-select-option value="大床房">大床房</a-select-option>
+                  <a-select-option value="双床房">双床房</a-select-option>
+                  <a-select-option value="家庭房">家庭房</a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item label="房间数量" v-bind="formItemLayout">
+                <a-input
+                    placeholder="请填写房间数量"
+                    v-decorator="['address', { rules: [{ required: true, message: '请输入房间数量' }] }]"
+                />
+            </a-form-item>
+            <a-form-item label="原始价格" v-bind="formItemLayout">
+                <a-input
+                    placeholder="请填写原始价格"
+                    v-decorator="['price', { rules: [{ required: true, message: '请输入原始价格' }] }]"
+                />
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+<script>
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+export default {
+    name: 'addRoomModal',
+    data() {
+        return {
+            formItemLayout: {
+                labelCol: {
+                    xs: { span: 12 },
+                    sm: { span: 6 },
+                },
+                wrapperCol: {
+                    xs: { span: 24 },
+                    sm: { span: 16 },
+                },
+            },
+        }
+    },
+    computed: {
+        ...mapGetters([
+            'addRoomModalVisible'
+        ])
+    },
+    beforeCreate() {
+        this.form = this.$form.createForm(this, { name: 'addRoomModal' });
+    },
+    mounted() {
+
+    },
+    methods: {
+        ...mapMutations([
+            'set_addRoomModalVisible'
+        ]),
+        ...mapActions([
+
+        ]),
+        cancel() {
+            this.set_addRoomModalVisible(false)
+        },
+        handleSubmit(e) {
+            e.preventDefault();
+            this.form.validateFieldsAndScroll((err, values) => {
+                if (!err) {
+                    console.log('Received values of form: ', values);
+                }
+            });
+        },
+    }
+}
+</script>

front_end/src/views/hotelManager/manageHotel.vue

@@ -7,46 +7,80 @@
                 </div>
                  <a-table
                     :columns="columns1"
-                    :dataSource="data"
+                    :dataSource="data1"
                     bordered
                 >
-                    <span slot="action" slot-scope="text, record">
-                        <a-button type="primary" @click="order(record)">录入房间</a-button>
+                    <span slot="action" slot-scope="record">
+                        <a-button type="primary" size="small" @click="addRoom(record)">录入房间</a-button>
+                        <a-divider type="vertical"></a-divider>
+                        <a-popconfirm
+                            title="确定想删除该酒店吗？"
+                            @confirm="deleteHotel(record)"
+                            okText="确定"
+                            cancelText="取消"
+                        >
+                            <a-button type="danger" size="small">删除酒店</a-button>
+                        </a-popconfirm>
                     </span>
                 </a-table>
             </a-tab-pane>
             <a-tab-pane tab="订单管理" key="2">
                 <a-table
                     :columns="columns2"
-                    :dataSource="data"
+                    :dataSource="data2"
                     bordered
                 >
+                    <span slot="status" slot-scope="status">
+                        <a-tag
+                            :color="status==='入住中' ? 'green' :  'red' "
+                            :key="status"
+                        >
+                            {{ status }}
+                        </a-tag>
+                    </span>
                     <span slot="price" slot-scope="text">
                         <span>￥{{ text }}</span>
                     </span>
-                    <span slot="action" slot-scope="text, record">
-                        <a-button type="primary" @click="order(record)">订单详情</a-button>
+                    <span slot="action" slot-scope="record">
+                        <a-button type="primary" size="small">订单详情</a-button>
                         <a-divider type="vertical"></a-divider>
-                        <a-button type="danger" @click="order(record)">删除订单</a-button>
+                        <a-popconfirm
+                            title="确定想删除该订单吗？"
+                            @confirm="deleteOrder(record)"
+                            okText="确定"
+                            cancelText="取消"
+                        >
+                            <a-button type="danger" size="small">删除订单</a-button>
+                        </a-popconfirm>
                     </span>
                 </a-table>
             </a-tab-pane>
         </a-tabs>
         <AddHotelModal></AddHotelModal>
+        <AddRoomModal></AddRoomModal>
     </div>
 </template>
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
-import AddHotelModal from './components/addHotalModal'
+import AddHotelModal from './components/addHotelModal'
+import AddRoomModal from './components/addRoomModal'
 const columns1 = [
     {  
         title: '酒店名',
         dataIndex: 'name',
     },
+    {
+        title: '商圈',
+        dataIndex: 'BizRegion',
+    },
     {
         title: '地址',
         dataIndex: 'address',
     },
+    {
+        title: '酒店星级',
+        dataIndex: 'hotelStar'
+    },
     {
         title: '评分',
         dataIndex: 'hotelRate',
@@ -62,17 +96,25 @@ const columns1 = [
     },
   ];
 const columns2 = [
+    {  
+        title: '订单号',
+        dataIndex: 'orderId',
+    },
     {  
         title: '酒店名',
         dataIndex: 'hotelName',
     },
+    {
+        title: '房型',
+        dataIndex: 'roomType',
+    },
     {
         title: '入住时间',
-        dataIndex: 'InDate',
+        dataIndex: 'checkInDate',
     },
     {
         title: '离店时间',
-        dataIndex: 'outDate',
+        dataIndex: 'checkOutDate',
     },
     {
         title: '入住人数',
@@ -84,7 +126,8 @@ const columns2 = [
     },
     {
         title: '状态',
-        dataIndex: 'status'
+        dataIndex: 'status',
+        scopedSlots: { customRender: 'status' },
     },
     {
       title: '操作',
@@ -92,6 +135,41 @@ const columns2 = [
       scopedSlots: { customRender: 'action' },
     },
   ];
+  const data1 = [
+      {
+          key: '1',
+          name: '如家酒店(珠江路地铁站店)',
+          BizRegion:'鼓楼',
+          address: '鼓楼区珠江路888号',
+          hotelRate: '4.8',
+          hotelStar: 'Four',
+          description: '酒店描述信息',
+      }
+  ];
+  const data2 = [
+    {
+      key: '1',
+      orderId: '2019123000001',
+      hotelName: '如家酒店(珠江路地铁站店)',
+      roomType: '大床房',
+      checkInDate: '2019-12-30',
+      checkOutDate: '2019-12-31',
+      peopleNum: '2',
+      price: '298',
+      status: '已离店'
+    },
+    {
+      key: '2',
+      orderId: '2019123000001',
+      hotelName: '如家酒店(珠江路地铁站店)',
+      roomType: '标准间',
+      checkInDate: '2019-12-30',
+      checkOutDate: '2019-12-31',
+      peopleNum: '1',
+      price: '298',
+      status: '入住中'
+    },
+  ];
 export default {
     name: 'manageHotel',
     data(){
@@ -100,12 +178,14 @@ export default {
             pagination: {},
             columns1,
             columns2,
-            data: [],
+            data1,
+            data2,
             form: this.$form.createForm(this, { name: 'manageHotel' }),
         }
     },
     components: {
-        AddHotelModal
+        AddHotelModal,
+        AddRoomModal,
     },
     computed: {
         ...mapGetters([
@@ -128,8 +208,15 @@ export default {
         addHotel() {
             this.set_addHotelModalVisible(true)
         },
-        
-        
+        addRoom(record) {
+            this.set_addRoomModalVisible(true)
+        },
+        deleteHotel(){
+
+        },
+        deleteOrder(){
+
+        },
     }
 }
 </script>

front_end/src/views/login.vue

@@ -219,9 +219,7 @@ export default {
             email: this.form.getFieldValue("username"),
             password: this.form.getFieldValue("password")
           }
-          await this.login(data).then(()=>{
-            this.$router.push({ path: this.redirect || '/' })
-          })
+          await this.login(data)
           this.loginLoading = false
         }
       })

front_end/src/views/user/info.vue

@@ -3,51 +3,19 @@
         <a-tabs>
             <a-tab-pane tab="我的信息" key="1">
                 <a-form :form="form" style="margin-top: 30px">
-                    <a-form-item label="头像" :label-col="{ span: 3 }" :wrapper-col="{ span: 8, offset: 1 }">
-                        <a-avatar src="./defaultAvatar.png" :size="64"></a-avatar>
-                    </a-form-item>
+                    
                     <a-form-item label="用户名" :label-col="{ span: 3 }" :wrapper-col="{ span: 8, offset: 1  }">
                         <a-input
                             placeholder="请填写用户名"
-                            v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]"
-                            v-if="modify"
-                        />
-                        <span v-else>{{ userInfo.username }}</span>
-                    </a-form-item>
-                    <a-form-item label="昵称" :label-col="{ span: 3 }" :wrapper-col="{ span: 8, offset: 1  }">
-                        <a-input
-                            placeholder="请填写昵称"
-                            v-decorator="['nickname', { rules: [{ required: true, message: '请输入昵称' }] }]"
+                            v-decorator="['userName', { rules: [{ required: true, message: '请输入用户名' }] }]"
                             v-if="modify"
                         />
-                        <span v-else>{{ userInfo.nickname }}</span>
+                        <span v-else>{{ userInfo.userName }}</span>
                     </a-form-item>
                     <a-form-item label="邮箱" :label-col="{ span: 3 }" :wrapper-col="{ span: 8, offset: 1 }">
-                        <a-input
-                            placeholder="请填写邮箱"
-                            v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱' }] }]"
-                            v-if="modify"
-                        />
-                        <span v-else>{{ userInfo.email }}</span>
-                    </a-form-item>
-                    <a-form-item label="性别" :label-col="{ span: 3 }" :wrapper-col="{ span: 8, offset: 1 }">
-                        <a-select
-                            v-decorator="[
-                            'gender',
-                            { rules: [{ required: true, message: '请选择性别!' }] },
-                            ]"
-                            v-if="modify"
-                            placeholder="请选择性别"
-                        >
-                            <a-select-option value="male">
-                            男生
-                            </a-select-option>
-                            <a-select-option value="female">
-                            女生
-                            </a-select-option>
-                        </a-select>
-                        <span v-else>{{ userInfo.gender }}</span>
+                        <span>{{ userInfo.email }}</span>
                     </a-form-item>
+                    
                     <a-form-item label="手机号" :label-col="{ span: 3 }" :wrapper-col="{ span: 8, offset: 1 }">
                         <a-input
                             placeholder="请填写手机号"
@@ -56,16 +24,15 @@
                         />
                         <span v-else>{{ userInfo.phoneNumber}}</span>
                     </a-form-item>
-                    <a-form-item label="地址" :label-col="{ span: 3 }" :wrapper-col="{ span: 8, offset: 1 }">
+                    <a-form-item label="信用值" :label-col="{ span: 3 }" :wrapper-col="{ span: 8, offset: 1 }">
+                        <span>{{ userInfo.credit }}</span>
+                    </a-form-item>
+                    <a-form-item label="密码" :label-col="{ span: 3 }" :wrapper-col="{ span: 8, offset: 1 }" v-if="modify">
                         <a-input
-                            type="textarea"
-                            placeholder="请填写地址"
-                            v-decorator="['address']"
-                            v-if="modify"
+                            placeholder="请输入新密码"
+                            v-decorator="['password', { rules: [{ required: true, message: '请输入新密码' }] }]"
                         />
-                        <span v-else>{{ userInfo.address }}</span>
                     </a-form-item>
-                   
                     <a-form-item :wrapper-col="{ span: 12, offset: 5 }" v-if="modify">
                         <a-button type="primary" @click="saveModify">
                             保存
@@ -153,22 +120,20 @@ export default {
         ])
     },
     mounted() {
-
+        this.getUserInfo()
     },
     methods: {
         ...mapActions([
+            'getUserInfo',
             'updateUserInfoById',
         ]),
         saveModify() {
             this.form.validateFields((err, values) => {
                 if (!err) {
                     const data = {
-                        username: this.form.getFieldValue('username'),
-                        nickname: this.form.getFieldValue('nickname'),
-                        email: this.form.getFieldValue('email'),
+                        userName: this.form.getFieldValue('userName'),
                         phoneNumber: this.form.getFieldValue('phoneNumber'),
-                        gender: this.form.getFieldValue('gender'),
-                        address: this.form.getFieldValue('address')
+                        password: this.form.getFieldValue('password')
                     }
                     this.updateUserInfoById(data).then(()=>{
                         this.modify = false
@@ -179,12 +144,8 @@ export default {
         modifyInfo() {
             setTimeout(() => {
                 this.form.setFieldsValue({
-                    'username': this.userInfo.username,
-                    'nickname': this.userInfo.nickname,
-                    'email': this.userInfo.email,
+                    'userName': this.userInfo.userName,
                     'phoneNumber': this.userInfo.phoneNumber,
-                    'gender': this.userInfo.gender,
-                    'address': this.userInfo.address
                 })
             }, 0)
             this.modify = true