From e17a8c3263ba158829bc7cb842a15a14349c8065 Mon Sep 17 00:00:00 2001 From: michael Date: Thu, 19 Sep 2019 09:12:01 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=95=B0=E6=8D=AE=E5=BA=93?= =?UTF-8?q?=E9=93=BE=E6=8E=A5=E5=92=8C=E9=A6=96=E5=8F=B0=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Layout.js | 8 +- mongodb/index.js | 180 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + pages/admin/back.js | 44 ++++++++++ pages/admin/index.js | 159 ++++++++++++++++++++++++++++++++++ pages/api/login/index.js | 5 ++ pages/index.js | 1 - yarn.lock | 29 ++++++- 8 files changed, 422 insertions(+), 5 deletions(-) create mode 100644 mongodb/index.js create mode 100644 pages/admin/back.js create mode 100644 pages/admin/index.js create mode 100644 pages/api/login/index.js diff --git a/components/Layout.js b/components/Layout.js index 6f58d77..5bba771 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -11,16 +11,18 @@ const Layout = props => { return ( <>
-
+
{props.children}
{/* background: rgba(255,255,255,0.6) */} diff --git a/mongodb/index.js b/mongodb/index.js new file mode 100644 index 0000000..9a57939 --- /dev/null +++ b/mongodb/index.js @@ -0,0 +1,180 @@ +const MongoClient = require('mongodb').MongoClient; +const url = "mongodb://localhost:27017/"; +const DataBase = 'blog'; +//数据库的名称 +const Collection = { + user: 'user', + blog: 'blog' + // user是用户表 + // blog是blog文章列表 + // 这里使用枚举 + // 集合的名称「集合等于数据库里面的表」 +} +// parameter 是形参 +// argument 是实参 +// 形参变量只有在被调用时才分配内存单元，在调用结束时，即刻释放所分配的内存单元。因此，形参只在函数内部有效。函数调用结束返回主调用函数后则不能再使用该形参变量。 +// 实参可以是常量、变量、表达式、函数等，无论实参是何种类型的量，在进行函数调用时，它们都必须有确定的值，以便把这些值传送给形参。因此应预先用赋值，输入等办法使参数获得确定值。 + +const connectOption = { useNewUrlParser: true, useUnifiedTopology: true }; +// connectOption 是数据库连接配置 + +const deleteDateMore = (parameter) => { + //删除符合条件的所有数据 + // data 是条件 + // Collection 是集合的名称 + let argument = parameter ? parameter : {}; + let { data, Collection } = argument; + data = data ? data : ''; + + if (!Collection) { + throw 'Collection参数缺失.'; + } + MongoClient.connect(url, connectOption, function (err, db) { + if (err) throw err; + let dbo = db.db(DataBase); + let whereStr = data ? data : {}; // 查询条件 + dbo.collection(Collection).deleteMany(whereStr, function (err, obj) { + if (err) throw err; + console.log("文档删除成功"); + db.close(); + }); + }); +} +const deleteDate = (parameter) => { + //删除符合的第一条数据 + // data 是条件 + // Collection 是集合的名称 + let argument = parameter ? parameter : {}; + let { data, Collection } = argument; + data = data ? data : ''; + + if (!Collection) { + throw 'Collection参数缺失.'; + } + MongoClient.connect(url, connectOption, function (err, db) { + if (err) throw err; + let dbo = db.db(DataBase); + let whereStr = data; // 查询条件 + dbo.collection(Collection).deleteOne(whereStr, function (err, obj) { + if (err) throw err; + console.log("文档删除成功"); + db.close(); + }); + }); +} +const queryDate = (parameter) => { + //查询符合的数据 + // data 是条件 + // Collection 是集合的名称 + // option 是查找的选项比如跳过第5条分页 + let argument = parameter ? parameter : {}; + let { data, Collection, option } = argument; + data = data ? data : ''; + option = option ? option : ''; + if (!Collection) { + throw 'Collection参数缺失.'; + } + return new Promise((resolve, reject) => { + MongoClient.connect(url, connectOption, function (err, db) { + if (err) throw err; + let dbo = db.db(DataBase); + let whereStr = data ? data : {}; // 查询条件 + dbo.collection(Collection).find(whereStr, {...option}).toArray(function (err, result) { + if (err) throw err; + resolve(result); + db.close(); + console.log(result); + // Buffer.from(result[1]._id.id).toString('hex') + // 将buffer转换为id + }); + }); + }) +} +const insertData = (parameter) => { + //插入数据 + // data 是条件 + // Collection 是集合的名称 + let argument = parameter ? parameter : {}; + let { data, Collection } = argument; + data = data ? data : ''; + + if (!Collection) { + throw 'Collection参数缺失.'; + } + MongoClient.connect(url, connectOption, function (err, db) { + if (err) throw err; + let dbo = db.db(DataBase); + let item = data; + dbo.collection(Collection).insertOne(item, function (err, res) { + if (err) throw err; + console.log("文档插入成功"); + db.close(); + }); + }); +} +const createDB = () => { + //数据库插入数据自动创建 + MongoClient.connect(`${url}/${DataBase}`, connectOption, function (err, db) { + if (err) throw err; + console.log("数据库已创建!"); + db.close(); + }); +} +const deleteDB = () => { + //删除数据库 + MongoClient.connect(`${url}/${DataBase}`, connectOption, function (err, db) { + if (err) throw err; + let dbo = db.db(DataBase); + dbo.dropDatabase((err) => { + if (err) throw err; + console.log('数据库删除成功!'); + db.close(); + }) + db.close(); + }); +} +const deleteCollection = (parameter) => { + //删除集合 + let argument = parameter ? parameter : {}; + let { Collection } = argument; + + if (!Collection) { + throw 'Collection参数缺失.'; + } + MongoClient.connect(`${url}/${DataBase}`, connectOption, function (err, db) { + if (err) throw err; + let dbo = db.db(DataBase); + // Collection + dbo.dropCollection(Collection, (err) => { + if (err) throw err; + console.log('集合删除成功!'); + db.close(); + }) + db.close(); + }); +} +module.exports = { + deleteDateMore, + deleteDate, + queryDate, + insertData, + createDB, + deleteDB, + deleteCollection, + Collection +} +// insertData({ +// data: { +// heaaa: 222, +// }, +// Collection: Collection.blog +// }); +queryDate({ + data: { + 'heaaa': { $ne: '' }, + }, + Collection: Collection.blog +}) +// deleteCollection({ +// Collection: Collection.blog +// }) diff --git a/package.json b/package.json index 4ca097f..bbfca2c 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "dependencies": { "@zeit/next-stylus": "^1.0.1", "isomorphic-unfetch": "^3.0.0", + "mongodb": "^3.3.0", "next": "^9.0.3", "react": "^16.9.0", "react-dom": "^16.9.0", diff --git a/pages/admin/back.js b/pages/admin/back.js new file mode 100644 index 0000000..7b6d128 --- /dev/null +++ b/pages/admin/back.js @@ -0,0 +1,44 @@ +import React, { useState, useEffect } from 'react'; +export default () => { + const [load, setLoad] = useState(false); + useEffect(() => { + setLoad(true); + }, []) + + + return
+ {load && +
{ + ` + BODY对象宽度 ==> ${document.body.clientWidth} \n + BODY对象高度 ==> ${document.body.clientHeight} \n + 可见区域宽度 ==> ${document.documentElement.clientWidth} \n + 可见区域高度 ==> ${document.documentElement.clientHeight} \n + + 网页可见区域宽： ${document.body.clientWidth} \n + 网页可见区域高： ${document.body.clientHeight} \n + 网页可见区域宽： ${document.body.offsetWidth}(包括边线的宽) \n + 网页可见区域高： ${document.body.offsetHeight}(包括边线的高) \n + 网页正文全文宽： ${document.body.scrollWidth} \n + 网页正文全文高： ${document.body.scrollHeight} \n + 网页被卷去的高： ${document.body.scrollTop} \n + 网页被卷去的左： ${document.body.scrollLeft} \n + 网页正文部分上： ${window.screenTop} \n + 网页正文部分左： ${window.screenLeft} \n + 屏幕分辨率的高： ${window.screen.height} \n + 屏幕分辨率的宽： ${window.screen.width} \n + 屏幕可用工作区高度： ${window.screen.availHeight} \n + 屏幕可用工作区宽度： ${window.screen.availWidth} \nf + ` + } +
+ } + < style jsx > {` + .container{ + display: flex; + align-items: center; + justify-content: center; + } + `} +
+} diff --git a/pages/admin/index.js b/pages/admin/index.js new file mode 100644 index 0000000..405d9c2 --- /dev/null +++ b/pages/admin/index.js @@ -0,0 +1,159 @@ +import React, { useState, useEffect } from 'react'; + + +export default () => { + // document.documentElement.clientWidth + // document.documentElement.clientHeight + const [load, setLoad] = useState(false); + const [screen, setScreen] = useState({ + width: 0, + height: 0, + }) + useEffect(() => { + setLoad(true); + const getScreen = () => { + setScreen({ + width: document.documentElement.clientWidth, + height: document.documentElement.clientHeight + }) + } + window.addEventListener('resize', getScreen) + //自定义事件触发 + let event = new Event('resize'); + window.dispatchEvent(event); + //自定义事件触发 + // getScreen() + return () => { + window.removeEventListener('resize', getScreen) + } + }, []) + const { width, height } = screen; + // const { getFieldDecorator } = this.props.form; + + const handleSubmit = e => { + e.preventDefault(); + this.props.form.validateFields((err, values) => { + if (!err) { + console.log('Received values of form: ', values); + } + }); + }; + return <> +
+ { + width != 0 && +
+

管理登录

+
+ +
+
+ +
+
+ +
+
+ } +
+ + +} + + + + + +// function hasErrors(fieldsError) { +// return Object.keys(fieldsError).some(field => fieldsError[field]); +// } + +// class HorizontalLoginForm extends React.Component { +// componentDidMount() { +// // To disabled submit button at the beginning. +// this.props.form.validateFields(); +// } + +// handleSubmit = e => { +// e.preventDefault(); +// this.props.form.validateFields((err, values) => { +// if (!err) { +// console.log('Received values of form: ', values); +// } +// }); +// }; + +// render() { +// const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form; + +// // Only show error after a field is touched. +// const usernameError = isFieldTouched('username') && getFieldError('username'); +// const passwordError = isFieldTouched('password') && getFieldError('password'); +// return ( +//
+// +// {getFieldDecorator('username', { +// rules: [{ required: true, message: 'Please input your username!' }], +// })( +// } +// placeholder="Username" +// />, +// )} +// +// +// {getFieldDecorator('password', { +// rules: [{ required: true, message: 'Please input your Password!' }], +// })( +// } +// type="password" +// placeholder="Password" +// />, +// )} +// +// +// +// +//
+// ); +// } +// } + +// const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(HorizontalLoginForm); diff --git a/pages/api/login/index.js b/pages/api/login/index.js new file mode 100644 index 0000000..0b9e239 --- /dev/null +++ b/pages/api/login/index.js @@ -0,0 +1,5 @@ +export default (req, res) => { + res.setHeader('Content-Type', 'application/json') + res.statusCode = 200 + res.end(JSON.stringify({ name: 'Nextjs' })) + } diff --git a/pages/index.js b/pages/index.js index 0e7ed70..b11b96e 100644 --- a/pages/index.js +++ b/pages/index.js @@ -384,7 +384,6 @@ const Home = (props) => { } -let refInitPage = createRef(); const InitPage = (props) => { const [action, setAction] = useState(false); const [hide, setHide] = useState(false); diff --git a/yarn.lock b/yarn.lock index 0eba762..3463798 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1409,6 +1409,11 @@ browserslist@^4.6.0, browserslist@^4.6.6: electron-to-chromium "^1.3.191" node-releases "^1.1.25" +bson@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/bson/-/bson-1.1.1.tgz#4330f5e99104c4e751e7351859e2d408279f2f13" + integrity sha512-jCGVYLoYMHDkOsbwJZBCqwMHyH4c+wzgI9hG7Z6SZJRXWr+x58pdIbm2i9a/jFGCkRJqRUr8eoI7lDWa0hTkxg== + buffer-from@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef" @@ -3260,6 +3265,15 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0: dependencies: minimist "0.0.8" +mongodb@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-3.3.0.tgz#3ec6fa6260405b16fe76cc37b5d09684d13d8c11" + integrity sha512-QYa8YEN5uiJyIFdnn1vmBtiSveyygmQghsaL/RDnHqUzjGvkYe0vRg6UikCKba06cg6El/Lu7qzOYnR3vMhwlA== + dependencies: + bson "^1.1.1" + require_optional "^1.0.1" + safe-buffer "^5.1.2" + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" @@ -4259,6 +4273,19 @@ replace-ext@1.0.0: resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb" integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs= +require_optional@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/require_optional/-/require_optional-1.0.1.tgz#4cf35a4247f64ca3df8c2ef208cc494b1ca8fc2e" + integrity sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g== + dependencies: + resolve-from "^2.0.0" + semver "^5.1.0" + +resolve-from@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-2.0.0.tgz#9480ab20e94ffa1d9e80a804c7ea147611966b57" + integrity sha1-lICrIOlP+h2egKgEx+oUdhGWa1c= + resolve-from@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" @@ -4352,7 +4379,7 @@ schema-utils@^1.0.0: ajv-errors "^1.0.0" ajv-keywords "^3.1.0" -"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0: +"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==