Nodejs界面展示，晒一下吧，界面很土，没啥新鲜的东西

Nodejs界面展示，晒一下吧，界面很土，没啥新鲜的东西

http://cnodejs.org/topic/504dbb38659b143e1d016448 上次的帖子 改动了一下，把头像上传用flex做了一下。 增加了第三方登录（微博还不行，因为丫审核没通过。QQ已经通过） 做这个发现原来提供的SDK都是1.0的，只好自己写，遇到一个很2B的小问题让我弄了快一天，郁闷

手机就别看了，做的太恶心了

数据库mysql express + ejs mysql不太适合，如果有心情再改成其它nosql ejs功能太弱 还有很多问题未测试，别黑我啊 http://www.db9db.com


4 回复

根据你提供的标题和内容，我将为你构建一个简单的 Node.js 界面展示示例。这个示例将包括基本的用户界面展示、第三方登录（使用模拟数据）以及数据库操作。请注意，这只是一个基础示例，你可以在此基础上进行扩展和优化。

示例代码

首先，确保你已经安装了必要的依赖项：

npm install express mysql ejs passport passport-oauth2

项目结构

/nodejs-interface
|-- app.js
|-- views
|   |-- index.ejs
|   |-- login.ejs
|-- public
    |-- css
        |-- style.css

app.js

const express = require('express');
const mysql = require('mysql');
const ejs = require('ejs');
const passport = require('passport');
const OAuth2Strategy = require('passport-oauth2').Strategy;

const app = express();

// 配置数据库连接
const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'mydatabase'
});

db.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL database!');
});

// 配置 EJS 模板引擎
app.set('view engine', 'ejs');

// 配置静态文件
app.use(express.static('public'));

// 配置 Passport
passport.use(new OAuth2Strategy({
    authorizationURL: 'https://example.com/oauth2/authorize',
    tokenURL: 'https://example.com/oauth2/token',
    clientID: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
    callbackURL: 'http://localhost:3000/auth/callback'
  },
  function(accessToken, refreshToken, profile, cb) {
    // 这里可以处理用户信息并保存到数据库
    return cb(null, profile);
  }
));

passport.serializeUser(function(user, done) {
  done(null, user);
});

passport.deserializeUser(function(obj, done) {
  done(null, obj);
});

app.use(passport.initialize());
app.use(passport.session());

// 路由
app.get('/', (req, res) => {
  res.render('index', { user: req.user });
});

app.get('/login', (req, res) => {
  res.render('login');
});

app.get('/auth/callback',
  passport.authenticate('oauth2'),
  function(req, res) {
    res.redirect('/');
  });

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Node.js Interface</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <h1>Welcome, <%= user ? user.displayName : 'Guest' %>!</h1>
  <% if (user) { %>
    <img src="<%= user.photos[0].value %>" alt="Profile Picture">
  <% } else { %>
    <a href="/login">Login with Third Party</a>
  <% } %>
</body>
</html>

views/login.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
</head>
<body>
  <h1>Login</h1>
  <a href="/auth">Login with Third Party</a>
</body>
</html>

public/css/style.css

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

解释

  1. 数据库：使用 MySQL 存储用户信息。
  2. Express 和 EJS：使用 Express 框架和 EJS 模板引擎来渲染页面。
  3. 第三方登录：使用 Passport 库实现第三方登录功能，这里使用了一个模拟的 OAuth2 策略。
  4. 界面：使用 EJS 渲染页面，并添加了一些基本的样式。

希望这个示例能帮助你理解如何构建一个简单的 Node.js 界面展示。你可以根据需要进一步优化和扩展。


嗯，看过了

糗百？

针对“Nodejs界面展示，晒一下吧，界面很土，没啥新鲜的东西”这个帖子，可以这样回复：

感谢分享你的项目！从描述来看，你已经使用了一些常见的技术栈来搭建后端服务，包括 Express 和 EJS 模板引擎。同时，你也提到了在前端使用 Flex 布局来优化头像显示，并且尝试集成了第三方登录功能（如微博和 QQ）。

示例代码

以下是一个简单的 Node.js + Express + EJS 示例代码，用于创建一个基本的用户信息页面，并展示用户的头像。你可以根据需要进一步定制化和优化这个界面。

服务器端代码 (server.js)

const express = require('express');
const path = require('path');

const app = express();

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// 模拟数据库中的用户数据
let users = [
    { id: 1, name: "张三", avatar: "https://via.placeholder.com/50" },
    { id: 2, name: "李四", avatar: "https://via.placeholder.com/50" }
];

app.get('/', (req, res) => {
    res.render('index', { users });
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

EJS 视图模板 (views/index.ejs)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User List</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .avatar {
            width: 50px;
            height: 50px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <% users.forEach(user => { %>
            <img src="<%= user.avatar %>" alt="<%= user.name %>" class="avatar">
        <% }) %>
    </div>
</body>
</html>

解释

  • Express: 作为服务器框架，处理路由和请求。
  • EJS: 用于渲染 HTML 页面，动态生成内容。
  • Flexbox: 使用 Flexbox 布局使头像能够灵活排列。
  • 数据库模拟: 这里仅使用了简单的数组来模拟数据库数据，实际应用中应使用 MySQL 或其他数据库存储数据。

希望这些代码和说明能帮助你改进界面展示。如果需要集成第三方登录功能，可以考虑使用 Passport.js，这是一个非常强大的认证中间件，支持多种第三方登录方式。

回到顶部