add home page

app.js

@@ -2,35 +2,65 @@ var express = require('express');
 var multer = require('multer');
 var upload = multer({ dest: 'uploads/' });
 var bodyParser = require('body-parser');
+var session = require('express-session');
 var fs = require('fs');
 var gm = require('gm');
 var app = express();
 
+app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json({ limit: '50mb' }));
 app.use(express.static('static'));
+app.use(session({
+    secret: 'tonkia', // 对session id 相关的cookie 进行签名
+    resave: true,
+    saveUninitialized: false, // 是否保存未初始化的会话
+    cookie: {
+        maxAge: 1000 * 60 * 2, // 设置 session 的有效时间，单位毫秒
+    }
+}));
+
+//权限判断
+app.use(['/create', '/logout', '/home'], function (req, res, next) {
+    if (req.session.user)
+        next();
+    else
+        res.redirect('/');
+});
 
 //临时存储数据
 var data = { name: '默认方案', components: [] };
-var acc = 'tonkia';
+var user = { account: 'tonkia', userName: 'tonkia xx', password: '123' };
-var pwd = '123';
 
 //主页加载：登录页面
 app.get('/', function (req, res) {
     res.sendFile(__dirname + "/views/login.html");
 });
 
+//方案创建
+app.get('/create', function (req, res) {
+    res.sendFile(__dirname + "/views/createScheme.html");
+});
+
 //登录
 app.post('/', function (req, res) {
     var account = req.body.account;
     var password = req.body.password;
     //用户验证
-    if (account == acc && password == pwd) {
+    if (account == user.account && password == user.password) {
-        res.send('登录成功');
+        req.session.user = user;
+        res.send('1');
     } else {
-        res.send('登录失败');
+        res.send('0');
     }
 });
 
+//用户注销
+app.get('/logout', function (req, res) {
+    req.session.user = null;
+    res.redirect('/');
+});
+
+//用户主页
 app.get('/home', function (req, res) {
         res.sendFile(__dirname + "/views/home.html");
 });
@@ -47,11 +77,11 @@ app.get('/files/:filename', function (req, res) {
     var filename = req.params['filename'];
     res.sendFile(__dirname + "/uploads/" + filename);
 });
+
 //返回缩略图
 app.get('/files/thumbnail/:filename', function (req, res) {
     var filename = req.params['filename'];
     // fs.exists(__dirname + "/uploads/thumbnail/" + filename, function (exist) {
-
     //     if (exist) {
     //         res.sendFile(__dirname + "/uploads/thumbnail/" + filename);
     //     } else {

package.json

@@ -9,7 +9,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "body-parser": "^1.18.3",
     "express": "^4.16.4",
+    "express-session": "^1.15.6",
     "gm": "^1.23.1",
     "multer": "^1.4.1"
   }

static/js/createScheme.js

@@ -311,12 +311,14 @@ function initTexture() {
 //初始化所有事件
 function initEvent() {
     $('#saveScheme').click(function () {
-        console.info(data);
+        // $.ajax({
-        $.ajax({
+        //     type: "POST",
-            type: "POST",
+        //     url: "/saveScheme",
-            url: "/saveScheme",
+        //     contentType: "application/json; charset=utf-8",
-            contentType: "application/json; charset=utf-8",
+        //     data: JSON.stringify(data)
-            data: JSON.stringify(data)
+        // });
+        $.post('/saveScheme', data, function () {
+
         });
     });
 
@@ -342,6 +344,9 @@ function initEvent() {
                 type: 'post',
                 url: "/upload",
                 data: formData,
+                cache: false,
+                processData: false,
+                contentType: false,
                 success: function (fileData) {
                     //上传成功后加载模型
                     //加载是异步的
@@ -370,6 +375,9 @@ function initEvent() {
                 type: 'post',
                 url: "/upload",
                 data: formData,
+                cache: false,
+                processData: false,
+                contentType: false,
                 success: function (fileData) {
                     //上传成功后加载模型
                     //加载是异步的

views/home.html

@@ -5,19 +5,48 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>UserName</title>
+    <title></title>
+    <!-- jquery -->
+    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
+    <!-- ZUI -->
+    <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.8.1/css/zui.min.css">
+    <script src="//cdn.bootcss.com/zui/1.8.1/js/zui.min.js"></script>
 </head>
 
-<body>
+<body background='/img/webbg.jpg'>
+    <div class="container">
+        <nav class="navbar navbar-default" role="navigation" style="margin-top:10px">
+            <div class="container-fluid">
+                <!-- 导航头部 -->
+                <a class="navbar-brand" href="">3D MODELS SYSTEM</a>
+                <!-- 导航项目 -->
+                <div class="collapse navbar-collapse navbar-collapse-example">
+                    <!-- 右侧的导航项目 -->
+                    <ul class="nav navbar-nav navbar-right">
+                        <li><a href="/create"><i class="icon icon-plus"></i> 添加新方案</a></li>
+                        <li class="dropdown">
+                            <a href="your/nice/url" class="dropdown-toggle" data-toggle="dropdown">xxxx <b class="caret"></b></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="your/nice/url">用户信息管理</a></li>
+                                <li class="divider"></li>
+                                <li><a href="/logout">注销</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        <div class="col-md-4 col-sm-6 col-lg-3">
             <a class="card" href="###">
-        <img src="" alt="">
+                <img src="" alt="xxx">
-        <div class="card-heading"><strong>良辰美景</strong></div>
+                <div class="card-heading"><strong>xxx</strong></div>
-        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
                 <div class="card-actions">
-            <button type="button" class="btn btn-danger"><i class="icon-heart"></i> 喜欢</button>
+                    <div class="pull-right"> <button type="button" class="btn btn-primary"><i class="icon-heart"></i>
-            <div class="pull-right text-danger"><i class="icon-heart-empty"></i> 520 人喜欢</div>
+                            分享</button></div>
                 </div>
             </a>
+        </div>
+    </div>
 </body>
 
 </html>

views/login.html

@@ -47,16 +47,18 @@
 
     <script>
         $('#loginBtn').click(function () {
-            $.ajax({
+            $.post('/', { account: $('#account').val(), password: $('#password').val() }, function (data) {
-                type: 'post',
+                if (data == 1) {
-                url: "/",
+                    window.location.href = "/home";
-                contentType: "application/json; charset=utf-8",
+                } else {
-                data: JSON.stringify({ account: $('#account').val(), password: $('#password').val() }),
+                    new $.zui.Messager('登录失败', {
-                success: function (data) {
+                        type: 'danger',
-                    alert(data);
+                        close: false,
-                },
+                        actions: [{
-                error: function () {
+                            icon: 'times',
-                    alert("失败");
+                            text: '确定',
+                        }]
+                    }).show();
                 }
             });
         });