Skip to content

Commit 4aeb14a

Browse files
qinhehuqinhehu
committed
build edit and show article work flow
1 parent d9b7492 commit 4aeb14a

File tree

15 files changed

+169
-62
lines changed

15 files changed

+169
-62
lines changed

‎app.js

-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ app.use(express.static(path.join(__dirname, 'public')));
3939

4040
app.use(function(req, res, next) {
4141
models(function(err, db) {
42-
console.log("1");
4342
if (err)
4443
return next(err);
4544

‎app/controllers/articles_controller.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
module.exports = {
22
list: function(req, res, next) {
3-
req.models.articles.find().limit(5).all(function (err, articles) {
4-
if (err) return next(err);
3+
req.models.articles.find().limit(5).all(function(err, articles) {
4+
if (err)
5+
return next(err);
56

6-
var items = articles.map(function (m) {
7+
var items = articles.map(function(m) {
8+
// if (!m.path) {
9+
// var key = m.filename;
10+
// m.path = policy.makeRequest(link + key);
11+
// }
12+
// console.log(m.path);
713
return m.serialize();
814
});
15+
console.log(items);
916

10-
res.send({ items: items });
17+
res.send({items: items});
1118
});
1219
}
1320
}

‎app/models/articles.js

+16-12
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,30 @@ module.exports = function(orm, db) {
77
headline: String,
88
subtitle: String,
99
filename: String,
10+
imgpath: String,
1011
createdate: String,
1112
lasteditdate: String
12-
},{
13-
methods:{
14-
serialize:function(){
13+
}, {
14+
methods: {
15+
serialize: function() {
1516
var article;
1617

17-
if(this.article){
18-
article = this.article.map(function(c){return c.serialize();});
19-
}else{
18+
if (this.article) {
19+
article = this.article.map(function(c) {
20+
return c.serialize();
21+
});
22+
} else {
2023
article = [];
2124
}
2225

23-
return{
24-
id:this.id,
25-
headline:this.headline,
26-
subtitle :this.subtitle,
26+
return {
27+
id: this.id,
28+
headline: this.headline,
29+
subtitle: this.subtitle,
2730
filename: this.filename,
28-
createdate:this.createdate,
29-
lasteditdate:this.lasteditdate
31+
imgpath: this.imgpath,
32+
createdate: this.createdate,
33+
lasteditdate: this.lasteditdate
3034
};
3135
}
3236
}

‎app/models/categy.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = function(orm, db) {
2+
var categy = db.define("categy", {
3+
id: {
4+
type: 'serial',
5+
key: true
6+
},
7+
categy: String
8+
});
9+
}

‎app/models/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ var connection =null;
66
function setUp(db,cb){
77
require('./articles')(orm,db);
88
require('./users')(orm,db);
9+
require('./categy')(orm,db);
910

1011
return cb(null,db);
1112
}

‎config/webpack.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ var webpack = require('webpack');
22

33
module.exports = {
44
entry: {
5-
markdown:'./react/markdown.js'
5+
markdown:'./react/markdown.js',
6+
article_preview:'./react/article_preview.js'
67
},
78
output: {
89
path: __dirname + '/static',

‎public/stylesheets/markdownEditor.css

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
.markdown_preview {
1717
float: right;
1818
overflow: scroll;
19+
height: 100%;
1920
}
2021

2122
html, body {

‎public/stylesheets/style.css

+1-4
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,7 @@ p {
1616
margin-bottom: 50px;
1717
}
1818

19-
.content {
20-
}
21-
2219
.content img {
23-
width: 500px;
20+
width: 300px;
2421
height: 300px;
2522
}

‎react/article_preview.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
var React = require('react');
2+
var ReactDom = require('react-dom');
3+
var Preview = require('./components/article_preview.jsx');
4+
5+
ReactDom.render(<Preview promise={$.getJSON('/getArticle')}/>,document.getElementById('content'));

‎react/components/article_preview.jsx

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
var React = require("react");
2+
var ReactDOM = require("react-dom");
3+
4+
var article_preview = React.createClass({
5+
6+
getInitialState: function() {
7+
return {loading: true, error: null, data: null};
8+
},
9+
componentDidMount() {
10+
this.props.promise.then(value => this.setState({loading: false, data: value}), error => this.setState({loading: false, error: error}));
11+
},
12+
render: function() {
13+
14+
if (this.state.loading) {
15+
return <span>Loading...</span>;
16+
} else if (this.state.error !== null) {
17+
return <span>Error: {this.state.error.message}</span>;
18+
} else {
19+
20+
var repos = this.state.data.items;
21+
var repoList = repos.map(function(repo, index) {
22+
$.get('/getDownloadURl',{key:repo.filename},function(result){
23+
var id = repo.id;
24+
$.get(result,function(result){
25+
$("div.media-right#"+id).html(result.substr(0,100));
26+
});
27+
});
28+
var createdate = new Date(repo.createdate * 1);
29+
var months = [
30+
'Jan',
31+
'Feb',
32+
'Mar',
33+
'Apr',
34+
'May',
35+
'Jun',
36+
'Jul',
37+
'Aug',
38+
'Sep',
39+
'Oct',
40+
'Nov',
41+
'Dec'
42+
];
43+
var year = createdate.getFullYear();
44+
var month = months[createdate.getMonth()];
45+
var date = createdate.getDate();
46+
var hours = createdate.getHours();
47+
var min = "0" + createdate.getMinutes();
48+
var sec = "0" + createdate.getSeconds();
49+
var time = date + ' ' + month + ' ' + year + ' ' + hours + ':' + min.substr(-2) + ':' + sec.substr(-2);
50+
51+
return (
52+
<div className="article-preview" key={repo.id}>
53+
<div className="content row">
54+
<p className="col-md-3">{repo.headline}</p>
55+
<p className="col-md-3">{time}</p>
56+
</div>
57+
<div className="content media">
58+
<div className="media-left">
59+
<img className="img-thumbnail" src={repo.imgpath}></img>
60+
</div>
61+
<div className="media-right markdown-body" id={repo.id}>
62+
<p>{time}</p>
63+
</div>
64+
</div>
65+
</div>
66+
);
67+
});
68+
return (
69+
<main>
70+
{repoList}
71+
</main>
72+
);
73+
}
74+
}
75+
});
76+
77+
module.exports = article_preview;

‎reset.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,20 @@ models(function(err, db) {
88
if (err)
99
throw err;
1010

11-
db.sync(function(err) {
11+
db.sync(function(err) {
12+
if (err)
13+
throw err;
14+
15+
db.models.categy.create([{
16+
categy: "android"
17+
},{categy: "iOS"}], function(err, message) {
1218
if (err)
1319
throw err;
1420

21+
db.close()
1522
console.log("Done!");
16-
1723
});
24+
25+
});
1826
});
1927
});

‎routes/editor.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ var path = require('path');
55
var qiniu = require("qiniu");
66

77
//需要填写你的 Access Key 和 Secret Key
8-
qiniu.conf.ACCESS_KEY = 'XH6idex6aFNQ2D1ekX3_JEo2cPgb7wEQnZXcFksJ';
9-
qiniu.conf.SECRET_KEY = 'CToiOE-p9eQgpSxft7odABrlN19QS1_YJGD8UW9x';
8+
qiniu.conf.ACCESS_KEY = '';
9+
qiniu.conf.SECRET_KEY = '';
1010

1111
fileName = "article.txt";
1212

@@ -17,16 +17,17 @@ bucket = 'blog';
1717
//要上传文件的本地路径
1818
filePath = path.resolve(__dirname, '..') + '/' + fileName
1919
//构建私有空间的链接
20-
url = 'http://opz7jf7ut.bkt.clouddn.com/';
20+
url = '';
2121
var policy = new qiniu.rs.GetPolicy();
2222

2323
router.get('/', function(req, res, next) {
2424
res.render('editor');
2525
});
2626

27-
router.post('/jquerytest', function(req, res, next) {
27+
router.post('/uploadInfo', function(req, res, next) {
2828
content = req.body.content;
2929
title = req.body.title;
30+
imgpath = req.body.imgpath;
3031

3132
key = title + '.txt';
3233
token = uptoken(bucket, key);
@@ -44,7 +45,7 @@ router.post('/jquerytest', function(req, res, next) {
4445

4546
var downloadUrl = policy.makeRequest(url + key);
4647
console.log(downloadUrl);
47-
upDateDB(req, title, "", title + '.txt');
48+
upDateDB(req, title, "", title + '.txt', imgpath);
4849

4950
res.send("1");
5051
res.end();
@@ -74,11 +75,12 @@ function uploadFile(uptoken, key, localFile, callback) {
7475
qiniu.io.putFile(uptoken, key, localFile, extra, callback);
7576
}
7677

77-
function upDateDB(req, headline, subtitle, filename) {
78+
function upDateDB(req, headline, subtitle, filename, imgpath) {
7879
var newRecord = {};
7980
newRecord.headline = headline;
8081
newRecord.subtitle = subtitle;
8182
newRecord.filename = filename;
83+
newRecord.imgpath = imgpath;
8284
newRecord.createdate = new Date().getTime();
8385
newRecord.lasteditdate = new Date().getTime();
8486

‎routes/index.js

+22-9
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
11
var express = require('express');
22
var router = express.Router();
33
var controllers = require('../app/controllers');
4+
var qiniu = require("qiniu");
5+
var url = require('url');
6+
var http = require('http');
7+
8+
//构建私有空间的链接
9+
link = '';
10+
var policy = new qiniu.rs.GetPolicy();
11+
12+
413

514
/* GET home page. */
6-
// router.get('/', function(req, res, next) {
7-
//
8-
// console.log(controllers.articles.list(req, res, next));
9-
// // req.models.Articles.find().limit(5).find(function(err,results){
10-
// // console.log(results);
11-
// // });
12-
// res.render('index', {title: '沁河'});
13-
// });
14-
router.get("/",controllers.articles.list);
15+
router.get('/', function(req, res, next) {
16+
res.render('index', {title: '沁河'});
17+
});
18+
// router.get("/", controllers.articles.list);
19+
20+
router.get('/getArticle', controllers.articles.list);
1521

22+
router.get('/getDownloadURl',function(req, res, next){
23+
console.log("123");
24+
var params = url.parse(req.url, true).query;
25+
var key = params.key;
26+
var downloadUrl = policy.makeRequest(link + key);
27+
res.send(downloadUrl);
28+
});
1629

1730
module.exports = router;

‎views/editor.jade

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,16 @@ block content
1515
h4.modal-title#myModalLabel 提醒
1616
.modal-body
1717
input.form-control#title(type="text",placeholder="起个标题吧")
18+
br
19+
input.form-control#img(type="text",placeholder="首页美图")
1820
.modal-footer
1921
button.btn.btn-default(type="button",data-dismiss="modal") 关闭
2022
button.btn.btn-primary#upload(type="button") 提交
2123
script.
2224
$(document).ready(function(){
2325
$("button#upload").click(function(){
2426
console.log($("#title").val());
25-
$.post('/editor/jquerytest',{content:$(".markdown_preview").html(),title:$("#title").val()},function(data){
27+
$.post('/editor/uploadInfo',{content:$(".markdown_preview").html(),title:$("#title").val(),imgpath:$("#img").val()},function(data){
2628
if(data == 1){
2729
$("button#upload").text("SUCCESS");
2830
$("button#upload").attr({"disabled":"disabled"});

‎views/index.jade

+3-22
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,12 @@ extends layout
22

33
append extraHeader
44
link(rel='stylesheet',href = '/stylesheets/style.css')
5+
link(rel='stylesheet',href = '//cdn.bootcss.com/github-markdown-css/2.6.0/github-markdown.min.css')
56
block content
67
div.row
78
div.col-md-9
8-
div.article-preview
9-
div.content.row
10-
p.col-md-3 test
11-
p.col-md-3 test
12-
p.col-md-6.text-right test
13-
div.content.media
14-
div.media-left
15-
img.img-thumbnail(src="http://img.zcool.cn/community/01706757efb4bca84a0e282b26b4a0.jpg@900w_1l_2o_100sh.jpg")
16-
div.media-right(style="margin-left:50px;")
17-
p.lead testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
18-
p testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttests
19-
div.article-preview
20-
div.content.row
21-
p.col-md-3 test
22-
p.col-md-3 test
23-
p.col-md-6.text-right test
24-
div.content.media
25-
div.media-left
26-
img.img-thumbnail(src="http://img.zcool.cn/community/01706757efb4bca84a0e282b26b4a0.jpg@900w_1l_2o_100sh.jpg")
27-
div.media-right(style="margin-left:50px;")
28-
p.lead testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
29-
p testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttests
9+
#content
10+
script(src='static/article_preview.js')
3011
div.col-md-3
3112
div.article-preview
3213
div.content

0 commit comments

Comments
 (0)