add database and home logic

app.js

@@ -5,12 +5,13 @@ var session = require('express-session');
 var fs = require('fs');
 var gm = require('gm');
 
+var db = require('./db');
 var app = express();
 
 var storage = multer.diskStorage({
     destination: function (req, res, cb) {
         var fileType = req.params["fileType"];
-        console.info(fileType);
+        //console.info(fileType);
         cb(null, 'uploads/' + fileType);
     }
 });
@@ -24,12 +25,12 @@ app.use(session({
     resave: true,
     saveUninitialized: false, // 是否保存未初始化的会话
     cookie: {
-        maxAge: 1000 * 60 * 2, // 设置 session 的有效时间，单位毫秒
+        maxAge: 1000 * 60 * 60 * 24 * 30, // 设置 session 的有效时间，单位毫秒
     }
 }));
 
-//权限判断
-app.use(['/create', '/logout', '/home'], function (req, res, next) {
+//权限判断：拦截器
+app.use(['/create', '/logout', '/home', '/saveScheme', '/getScheme'], function (req, res, next) {
     if (req.session.user)
         next();
     else
@@ -37,8 +38,7 @@ app.use(['/create', '/logout', '/home'], function (req, res, next) {
 });
 
 //临时存储数据
-var data = { name: '默认方案', components: [] };
-var user = { account: 'tonkia', userName: 'tonkia xx', password: '123' };
+//var data = { name: '默认方案', components: [], img: null };
 
 //主页加载：登录页面
 app.get('/', function (req, res) {
@@ -50,10 +50,15 @@ app.get('/create', function (req, res) {
     res.sendFile(__dirname + "/views/createScheme.html");
 });
 
+app.get('/create/:id', function (req, res) {
+    res.sendFile(__dirname + "/views/createScheme.html");
+});
+
 //登录
 app.post('/', function (req, res) {
     var account = req.body.account;
     var password = req.body.password;
+    db.queryUserByAccount(account, function (user) {
         //用户验证
         if (account == user.account && password == user.password) {
             req.session.user = user;
@@ -62,6 +67,7 @@ app.post('/', function (req, res) {
             res.send('0');
         }
     });
+});
 
 //用户注销
 app.get('/logout', function (req, res) {
@@ -74,9 +80,23 @@ app.get('/home', function (req, res) {
     res.sendFile(__dirname + "/views/home.html");
 });
 
+app.post('/home', function (req, res) {
+    //初始化主页数据
+    //用户信息
+    var user = req.session.user;
+    db.querySchemeByUid(user.id, function (schemeList) {
+        delete user.password;
+        var homeData = {
+            user: user,
+            schemeList: schemeList
+        }
+        res.send(homeData);
+    });
+});
+
 //接受文件上传，并且返回文件名
 app.post('/upload/:fileType', upload.single('file'), function (req, res) {
-    console.info(req.file)
+    //console.info(req.file)
     res.send(req.file);
 });
 
@@ -107,13 +127,43 @@ app.get('/files/:fileType/:fileName', function (req, res) {
 
 //保存方案
 app.post('/saveScheme', function (req, res) {
-    data = req.body;
-    console.info(data);
+    var data = req.body;
+    var img = data.img;
+    delete data.img;
+    db.insertScheme(req.session.user.id, data.name, JSON.stringify(data), img, function (res) {
+        //console.info(res);
+        if (res.affectedRows > 0) {
+
+        } else {
+
+        }
+    });
+    // console.info(data);
 });
 
 //获取方案
 app.post('/getScheme', function (req, res) {
+    var data = { name: '默认方案', components: [], img: null };
+    res.send(data);
+});
+
+app.post('/getScheme/:id', function (req, res) {
+    var id = req.params['id'];
+    var user = req.session.user;
+    // console.info(user.id + ":" + id);
+    if (id) {
+        db.getSchemeById(user.id, id, function (row) {
+            if (row.length > 0) {
+                //  console.info(row[0].data);
+                var data = JSON.parse(row[0].data);
                 res.send(data);
+            } else {
+                //找不到方案
+            }
+        })
+    } else {
+
+    }
 });
 
 app.listen(80);

db.js

@@ -0,0 +1,86 @@
+var mysql = require('mysql');
+
+var connection = mysql.createPool({
+    host: '127.0.0.1',//主机
+    user: 'root',//MySQL认证用户名
+    password: '123456',//MySQL认证用户密码
+    port: '3306',//端口号
+    database: '3dmodel'
+});
+
+//根据用户名获取user
+module.exports.queryUserByAccount = function (account, callback) {
+    //创建一个connection
+    connection.getConnection(function (err, conn) {
+        if (err) {
+            console.info(err);
+        } else {
+            conn.query('SELECT id,name,account,password FROM user WHERE account = ?', [account], function (err, rows) {
+                if (err) {
+                    console.log(err);
+                    return;
+                }
+                user = {
+                    id: rows[0].id,
+                    name: rows[0].name,
+                    account: rows[0].account,
+                    password: rows[0].password
+                }
+                callback(user);
+                conn.release();
+            });
+
+        }
+    });
+};
+
+module.exports.querySchemeByUid = function (uid, callback) {
+    connection.getConnection(function (err, conn) {
+        if (err) {
+            console.info(err);
+        } else {
+            conn.query('SELECT id,name,img FROM scheme WHERE uid = ?', [uid], function (err, rows) {
+                if (err) {
+                    console.log(err);
+                    return;
+                }
+                callback(rows);
+                conn.release();
+            });
+        }
+    });
+};
+
+module.exports.insertScheme = function (uid, name, data, img, callback) {
+    connection.getConnection(function (err, conn) {
+        if (err) {
+            console.info(err);
+        } else {
+            conn.query('INSERT INTO scheme(uid,name,data,img) VALUES(?,?,?,?)', [uid, name, data, img], function (err, rows) {
+                if (err) {
+                    console.log(err);
+                    return;
+                }
+                callback(rows);
+                conn.release();
+            });
+        }
+    });
+};
+
+module.exports.getSchemeById = function (uid, id, callback) {
+    connection.getConnection(function (err, conn) {
+        if (err) {
+            console.info(err);
+        } else {
+            conn.query('SELECT data FROM scheme WHERE uid=? AND id =?', [uid, id], function (err, rows) {
+                if (err) {
+                    console.log(err);
+                    return;
+                }
+                callback(rows);
+                conn.release();
+            });
+        }
+    });
+};

static/js/createScheme.js

@@ -19,10 +19,13 @@ $().ready(function () {
 //---------------------------------------------------------------------------------------------------------------------
 //获取数据 初始化data
 function initData() {
+    var url = document.location.toString();
+    var arrUrl = url.split("create");
+    var id = arrUrl[arrUrl.length - 1];
     //ajax请求数据
     $.ajax({
         type: "POST",
-        url: "/getScheme",
+        url: "/getScheme" + id,
         async: false, //同步请求，不然data会出问题
         success: function (remotaData) {
             //给全局data赋值
@@ -218,7 +221,7 @@ function initCamera() {
 
 function initRenderer() {
     //初始化渲染器
-    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
     //设置像素值
     renderer.setPixelRatio(window.devicePixelRatio);
     //设置渲染范围为屏幕的大小
@@ -311,11 +314,24 @@ function initTexture() {
 //初始化所有事件
 function initEvent() {
     $('#saveScheme').click(function () {
+        var saveData = data;
+        for (var index in saveData.components) {
+            for (textureIndex in saveData.components[index].textures) {
+                delete saveData.components[index].textures[textureIndex].textureObj;
+            }
+            for (modelIndex in saveData.components[index].models) {
+                delete saveData.components[index].models[modelIndex].modelObj;
+            }
+        }
+        var image = new Image();
+        let imgData = renderer.domElement.toDataURL("image/jpeg");//这里可以选择png格式jpeg格式
+        saveData.img = imgData;
+        console.info(saveData);
         $.ajax({
             type: "POST",
             url: "/saveScheme",
             contentType: "application/json; charset=utf-8",
-            data: JSON.stringify(data)
+            data: JSON.stringify(saveData)
         });
     });
 

views/createScheme.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8" />
-    <title>创建方案</title>
+    <title>3D MODELS SYSTEM - CREATE</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
     <!-- three.js -->

views/home.html

@@ -5,21 +5,27 @@
     <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></title>
+    <title>3D MODELS SYSTEM - HOME</title>
     <!-- jquery -->
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
-    <!-- 3D背景动画 -->
-    <script src="/js/vector.js"></script>
     <!-- ZUI -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/zui/1.8.1/css/zui.min.css">
     <script src="https://cdn.bootcss.com/zui/1.8.1/js/zui.min.js"></script>
     <style>
+        html,
+        body {
+            height: 100%;
+            width: 100%;
+        }
+
         #container {
             position: absolute;
             height: 100%;
             width: 100%;
         }
+
         #output {
+            position: absolute;
             width: 100%;
             height: 100%;
         }
@@ -27,11 +33,8 @@
 </head>
 
 <body background='/img/webbg.jpg'>
-    <div id="container">
-        <div id="output"></div>
-    </div>
     <div class="container">
-        <nav class="navbar navbar-default" role="navigation" style="margin-top:10px">
+        <nav class="navbar navbar-inverse" role="navigation" style="margin-top:10px">
             <div class="container-fluid">
                 <!-- 导航头部 -->
                 <a class="navbar-brand" href="">3D MODELS SYSTEM</a>
@@ -41,7 +44,8 @@
                     <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>
+                            <a class="dropdown-toggle" data-toggle="dropdown"><b id='name'>xxx</b>
+                                <b class="caret"></b></a>
                             <ul class="dropdown-menu" role="menu">
                                 <li><a href="your/nice/url">用户信息管理</a></li>
                                 <li class="divider"></li>
@@ -52,21 +56,40 @@
                 </div>
             </div>
         </nav>
-        <div class="col-md-4 col-sm-6 col-lg-3">
-            <a class="card" href="###">
-                <img src="" alt="xxx">
-                <div class="card-heading"><strong>xxx</strong></div>
-                <div class="card-actions">
-                    <div class="pull-right"> <button type="button" class="btn btn-primary"><i class="icon-heart"></i>
-                            分享</button></div>
-                </div>
-            </a>
+
+        <div id='schemeList'>
+
         </div>
     </div>
-
     <script>
-        var victor = new Victor("container", "output");
-        victor(["#5aa2e0", "#ea7bb2"]).set();
+        $().ready(function () {
+            initPage();
+        });
+
+        //初始化页面
+        function initPage() {
+            $.post('/home', function (data) {
+                console.info(data);
+                $('#name').text(data.user.name);
+                // <div class="col-md-4 col-sm-6 col-lg-3">
+                // <a class="card" href="###">
+                //     <img src="" alt="xxx">
+                //     <div class="card-heading"><strong>xxx</strong></div>
+                //     <div class="card-actions">
+                //         <div class="pull-right"> <button type="button" class="btn btn-primary"><i class="icon-heart"></i>
+                //                 分享</button></div>
+                //     </div>
+                // </a>
+                // </div >
+                for (index in data.schemeList) {
+                    var href = '/create/' + data.schemeList[index].id;
+                    var name = data.schemeList[index].name;
+                    var img = data.schemeList[index].img;
+                    var id = data.schemeList[index].id;
+                    $('#schemeList').append("<div class='col-md-4 col-sm-6 col-lg-3'><a class='card' href='" + href + "'><div class='media-wrapper'><img src='" + img + "' alt='" + name + "'></div><div class='card-heading'><strong>" + name + "</strong></div><div class='card-actions'><div class='pull-right'> <button type='button' class='btn btn-primary' onclick='share(" + id + ")'><i class='icon-heart'></i> 分享</button></div></div></a></div >");
+                }
+            });
+        }
     </script>
 </body>
 

views/login.html

@@ -5,6 +5,7 @@
     <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>3D MODELS SYSTEM</title>
     <!-- jquery -->
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
     <!-- ZUI -->